I am quite new with ReactJS especially using NextJS. I encountered an error when build a NextJS app. There are one component that uses a custom hook.

"use client";
import FormText from "@/components/Form/formtext";
import useAuthController from "./authcontroller";
import { ThreeDots } from "react-loader-spinner";

export default function Auth(){
    const {
        email, setEmail,
        password, setPassword,
        error,
        signIn,
        loading
    } = useAuthController();

    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        signIn();
    };

    return <section>
        <div className="flex flex-col items-center min-h-[80vh] md:min-h-[90vh] 2xl:min-h-[95vh] justify-center">
            <h1 className="text-kilamanjaro text-3xl font-bold">Are you My Owner?</h1>
            <div className="mt-4 w-10/12 md:mt-8 md:w-6/12 2xl:w-4/12 border border-kilamanjaro rounded px-4 py-4">
                <form className="flex flex-col gap-y-8" onSubmit={handleSubmit}>
                    <FormText title="Email" placeholder="@gmail.com" value={email} setValue={setEmail}/>
                    <FormText title="Password" placeholder="Insert Password here..." type="password" value={password} setValue={setPassword}/>
                    <div className="self-center">
                        <button className="md:hover:bg-secondary md:hover:text-white border border-secondary text-kilamanjaro font-semibold rounded-lg px-4 py-2 transition-all duration-150" disabled={loading} 
                        >{loading ? <ThreeDots width={20} height={20} color="#9AAAA9"/> : "Login"}</button>
                    </div>
                    {error && (
                        <div className="text-center text-red-500 text-sm">
                            {error}
                        </div>
                    )}
                </form>
            </div>
        </div>
    </section>
}

Here is useAuthController.ts

import { signIn as firebaseSignIn} from "@/data/firebase/auth";
import { FirebaseError } from "firebase/app";
import { useState } from "react";
import { useRouter } from "next/navigation"

function useAuthController() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState("");
    const [loading, setLoading] = useState(false);
    const router = useRouter();

    const signIn = async () => {
        setLoading(true);
        try {
            const userCredentials = await firebaseSignIn(email, password);
            if (userCredentials){
                router.push("/admin");
            }
            setLoading(false);
        } catch (error) {
            if (error instanceof FirebaseError){
                console.error(error);
                setError(`Sign-In Failed : ${error.code}`);
            } else {
                console.error(error);
                setError(`Unexpected error occured : ${error}`);
            }
            setLoading(false);
        } 
    }

    return {
        email, setEmail,
        password, setPassword,
        error,
        signIn,
        loading
    }
}

export default useAuthController;

When building the app, it logs in error

Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bemail%2C%20setEmail%2C%20password%2C%20setPassword%2C%20error%2C%20signIn%2C%20loading%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

I tried to get the full message and here it is

Objects are not valid as a React child (found: object with keys {email, setEmail, password, setPassword, error, signIn, loading}). If you meant to render a collection of children, use an array instead.

I tried to ensure there are no objects passes on the react component, but it seems to generate the same error. I am quite confused.