/**
* Checks if a React element is of a specific component type or wraps that component.
*
* This utility is useful when you need to identify components in `Children.map` or similar scenarios,
* especially when components use composition patterns.
*
* **Detection Strategy (Hybrid Approach):**
* 1. **Direct type matching** - Fast and reliable
* 2. **displayName matching** - Recommended for wrapper components (avoids hooks violations)
* 3. **Fallback rendering** - For backward compatibility with simple wrappers without displayName
* 4. **Graceful failure** - If rendering throws (e.g., hooks error), returns false
*
* **Best Practice**: Set `displayName` on wrapper components to match the target component's `displayName`.
* This is especially important for wrappers that use React hooks, as rendering them outside of
* React's component lifecycle will cause errors.
*
* @param element - The React element to check
*
* @param targetComponent - The component type to check against
*
* @returns `true` if the element is the target component or wraps it, `false` otherwise
*
* @example
*
* ```tsx
* // Direct usage
* if (isComponentOrWrapped(child, MyComponent)) {
* // child is MyComponent or wraps MyComponent
* }
*
* // In Children.map
* Children.map(children, (child) => {
* if (!isValidElement(child)) return child;
* if (isComponentOrWrapped(child, DataTableCell)) {
* return cloneElement(child, { ...additionalProps });
* }
* return child;
* });
*
* // Creating a wrapper component (recommended approach)
* const WrappedDataTableCell = (props) => {
* return
(element: React.ReactElement, targetComponent: React.ComponentType
): boolean;