React conditional hook component factory

ReactConditionalHookCompFactory.tsx

import {useState} from "react";

interface Opts<TPropsHook extends Record<string, any>, THookReturn extends TPropsHook> {
  componentName: string;
  useConditionalHook: (props: TPropsHook) => THookReturn | null;
  WrappedComponent: (props: THookReturn) => JSX.Element;
  ComponentForNull?: (props: TPropsHook) => JSX.Element;
}
const conditionalHookFactory = <TPropsHook extends Record<string, any>, THookReturn extends TPropsHook>({
  componentName, useConditionalHook, WrappedComponent, ComponentForNull
}: Opts<TPropsHook, THookReturn>)  => {
  const WrapperComponent: React.FC<TPropsHook> = (props) => {
    const propsToPass = useConditionalHook(props);

    if (propsToPass === null) {
      if (ComponentForNull) {
        return <ComponentForNull {...props} />;
      }
      return <></>;
    }

    return <WrappedComponent {...propsToPass} />;
  }

  (WrappedComponent as any).displayName = componentName;

  return WrapperComponent;
}

export interface TestProps {
  greeting: string;
}

const TestComp = conditionalHookFactory({
  componentName: "TestComp",
  useConditionalHook: (props: TestProps)  => {
    const [number] = useState(Math.floor(Math.random() * 10));
    if (number < 5) {
      return null;
    }
    return { number, ...props };
  },
  WrappedComponent: ({ greeting, number }) => {
    return (
      <div>
        {greeting} {number}
      </div>
    )
  },
  ComponentForNull: () => (<div></div>)
});

export default TestComp;