Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. With HOC

I've implemented an HOC that hide a component if the user hasn't subscribed,after that, i got that red error that I can't understand.

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

Here is the HOC :

const withSubscription = <P extends object>(  BaseComponent: ComponentType<P>,  pack: Pack,): ((props: P) => ReactElement | null) => (props: P): null | ReactElement => {  const { subscription } = useSubscription();  const subscriptionIndex = useMemo(() => subscription?.findIndex((subscriptionPack) => subscriptionPack === pack), [pack]);  if (subscriptionIndex === -1) {    return null;  }  return <BaseComponent {...props} />;};

I've applied the HOC to a button :

const Button: FC = (props) => {  return (<TouchableOpacity      style={[        styles.cartButtonContainer,        { backgroundColor: primaryColor },      ]}      onPress={handleAddProduct}><Icon        name={"cart-arrow-down"}        materialCom        style={{ marginRight: 0 }}        size={25}        color={secondaryColor}      /></TouchableOpacity>  );};export default withSubscription(CartButton, Pack.CLICK_COLLECT);

And here is how I call it :

return (<Button onPress={...}/>)

There is something i'm doing wrong ?