Basically I have ModalContext in which is:

 const [theBody, setModalBody] = useState<React.ReactNode|null>(null);

In other child component I want to create another component and pass it to the modal

import { Text, TouchableOpacity, View } from 'react-native';
import React from 'react';
import { useModalContext } from '@/contexts/ModalContext.tsx';
import SplitPackageModalBody from '@/screens/SaleScreen/Blocks/SplitPackageModalBody.tsx';

export default ({ packageFoSplit }: { packageFoSplit: Package }) => {
    const { setModalBody } = useModalContext();

    const showSplit = () => {
        const splitPackageModalBody = SplitPackageModalBody(packageFoSplit);

        setModalBody(splitPackageModalBody);
    };

    return (<View/>);
};

It work just fine until I start to use hooks inside splitPackageModalBody.

I get:

ERROR Error: Invalid hook call. Hooks can only be called inside of
the body of a function component. This could happen for one of the
following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://react.dev/link/invalid-hook-call for tips about how to debug
   and fix this problem., js engine: hermes

The idea is to make global modal in which I could set body as component.