I am receiving 'TypeError: Cannot destructure property 'invitedUsers' of 'Object(...)(...)' as it is null

Question

TypeError: Cannot destructure property 'invitedUsers' of 'Object(...)(...)' as it is null.

I am working within a ReactJS project and trying to create a custom useContext hook to be able to transfer state from one Child component to another. I have wrapped the navigator with as follows:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { AuthProvider } from './modules/auth';
import RootNavigator from './modules/navigation';
import { ContextProvider } from '../src/useContextHook';

const App = () => {
    return (
        <div className="App">
            <AuthProvider>
                <ContextProvider>
                    <BrowserRouter>
                        <RootNavigator />
                    </BrowserRouter>
                </ContextProvider>
            </AuthProvider>

        </div>
    );
};

The main code for the custom hook:

const UserContext = createContext(null);

const useCustomContext = () => useContext(UserContext);

const useMyContext = () => {
    const [invitedUsers, setInvitedUsers] = useState();

    return {
        invitedUsers,
        setInvitedUsers
    };
};


export const ContextProvider = ({ children }) => {
    const context = useCustomContext();

    return (
        <UserContext.Provider value={context}>
            {children}
        </UserContext.Provider>
    );
};

export default useCustomContext;

Answer 1

So finally I can answer my own question - which is that const context = useCustomContext(); should be specified as useMyContext = useCustomContext(); -- this resolved my issue with the error being received.