I get this message when I submit my Register form:

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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (http://localhost:5173/node_modules/.vite/deps/chunk-4JVUYMCH.js?v=7fb20519:11521:17)
    at useContext (http://localhost:5173/node_modules/.vite/deps/chunk-XEXUAUZA.js?v=7fb20519:1062:29)
    at useAuth (http://localhost:5173/src/hooks/auth.js:5:10)
    at useRegisterViewModel (http://localhost:5173/src/pages/Register/useRegisterViewModel.js:6:58)
    at action (http://localhost:5173/src/pages/Register/index.jsx:24:41)
    at actualHandler (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7fb20519:2625:14)
    at http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7fb20519:2637:27
    at runHandler (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7fb20519:2648:9)
    at callLoaderOrAction (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7fb20519:2697:22)
    at Object.resolve (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=7fb20519:2596:29)

How should I import firebase‘s functions to register a new user in my Register component in a action function by React Router 6.4? This is the code (I’m abstracting the logic using a ViewModel, I can also put it here if you want):

action:

export const Register = () => {
    const { email, password, errors, setEmail, setPassword, isLoading } = useRegisterViewModel()

    return (
        <div>
            <div>
                <h1>This is the register page</h1>
                <Form method="post">
                    <input
                        type="email"
                        name="email"
                        placeholder="Email"
                        value={email}
                        onChange={(e) => setEmail(e.value)}
                    />
                    {errors?.email && <span>{errors.email.message}</span>}

                    <input
                        type="password"
                        name="password"
                        placeholder="Password"
                        value={password}
                        onChange={(e) => setPassword(e.value)}
                    />
                    {errors?.password && <span>{errors.password.message}</span>}

                    <button type="submit" disabled={isLoading}>
                        Sign Up
                    </button>
                </Form>
            </div>
            <div>
                <h3>Register with Google</h3>
                <Form method="post">
                    <input type="hidden" name="type" value="google" />
                    <button type="submit">Sign Up With Google</button>
                </Form>
            </div>
        </div>
    )
}

component:

export const action = async ({ request }) => {
    const { register, loginWithGoogle } = useRegisterViewModel()
    const formData = Object.fromEntries(await request.formData())

    try {
        if (formData?.type === 'google') {
            await loginWithGoogle()
            return null
        }

        const { email, password } = await schema.parseAsync(formData)
        const registeredUser = await register(email, password);

        console.log('registeredUser', registeredUser);
        return redirect('/dashboard')
    } catch (err) {
        console.log('error', err);
        if (err instanceof ZodError) {
            return err.issues.reduce((acc, { message, path }) => ({ ...acc, [path[0]]: { message } }), {})
        }
        return err
    }
}