Hey I'm currently facing a error and i really dont understand why. It would be really nice if you could help me.

This is my LoginForm.tsx where i call the modal2FA.tsx

LoginForm.tsx:

"use client"

import React from 'react';
import { useFormState } from 'react-dom'
import {loginFormSubmit} from "@/src/actions/loginFormSubmit";
import { Toaster, toast } from 'sonner'
import modal2FA from "@/src/components/Auth/modal2FA";

const initialState = {
    result: {
        message: "",
        token: "",
        authActive: false,
        username: "",
    },
}

function LoginForm() { // Client Component can have event handlers
    const [state, formAction] = useFormState(loginFormSubmit, initialState)
    if (!state || !state.result) {
        toast.error('Something went wrong');
        return <Toaster position="top-right" richColors={true} />;
    }

    const { result } = state;

    if (result.authActive) {
        return modal2FA(result.username);
    }

    if (result.message && result.token) {
        toast.success(`Welcome back, ${result.username}!`);
    } else {
        toast.error(result.message);
    }

    if (result.token) {
        let cookieString = `token=${result.token}`;
        document.cookie = cookieString;
        localStorage.setItem('token', result.token);
        window.location.href = '/dashboard';
    }

    return ( ...

modal2FA.tsx:

"use client"

import React, { Fragment, useState } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import { ShieldCheckIcon } from '@heroicons/react/24/outline'
import {useFormState} from "react-dom";
import {verify2FASubmit} from "@/src/actions/verify2FASubmit";
import {toast, Toaster} from "sonner";

const faStateDef = {
    result: {
        message: "",
        token: "",
        username: "",
    },
}


 async function modal2FA(username) {
    const [open, setOpen] = useState(true)
    const [faState, faAction] = useFormState(verify2FASubmit, faStateDef)

    if (!faState || !faState.result) {
        toast.error('Something went wrong');
        return <Toaster position="top-right" richColors={true} />;
    }

    const { result } = faState;

    if(result.message && result.token){
        toast.success("Welcome back, " + result.username + "!")
    }else{
        toast.error(result.message)
    }

    if(result.token) {
        console.log(result?.token)
        let cookieString = `token=${result?.token}`;
        document.cookie = cookieString;
        localStorage.setItem('token', result?.token);
        window.location.href = '/dashboard';
    }

    return (

And i really dont unserstand why 😦