Google OAuth components must be used within GoogleOAuthProvider

I want to build my next js project in which i am using https://www.npmjs.com/package/@react-oauth/google but when I build it i get the following :

this is layout.js and in _app.js I have all the components wrapped in GoogleOAuthProvider

import { GoogleLogin } from '@react-oauth/google';
import {FcGoogle} from "react-icons/Fc"
import { useGoogleLogin } from '@react-oauth/google';
export default function Layout({ children }) {
    const client_id = ""
    const responseGoogle = (response) => {
        console.log(response);
    }
CUTTED (NOT RELEVANT)
    const login = useGoogleLogin({
        onSuccess: codeResponse => {

            const { code } = codeResponse;
            console.log(codeResponse)
            axios.post("http://localhost:8080/api/create-tokens", {  code }).then(response => {
                const { res, tokens } = response.data;
                const refresh_token = tokens["refresh_token"];
                const db = getFirestore(app)
                updateDoc(doc(db, 'links', handle), {
                    refresh_token : refresh_token
                })
                updateDoc(doc(db, 'users', useruid), {
                    refresh_token : refresh_token
                }).then(
CUTTED (NOT RELEVANT)
                )
            }).catch(err => {
                console.log(err.message);

            })
        },
        onError: errorResponse => console.log(errorResponse),
        flow: "auth-code",
        scope: "https://www.googleapis.com/auth/calendar"
    });
    return (
        <>
CUTTED (NOT RELEVANT)

        </>
    )
}

Everything works perfect in dev mode but it does not want to build

I've faced this issue too. So I use 'GoogleLogin' instead of 'useGoogleLogin', then you can custom POST method on 'onSuccess' property.

    import { GoogleLogin, GoogleOAuthenProvider} from '@react-oauth/google';
    import jwtDecode from 'jwt-decode';

    return(
        <GoogleOAuthProvider clientId="YOUR CLIENT ID">
            <GoogleLogin
                onSuccess={handleLogin}
            />
        </GoogleOAuthProvider>

The async function will be like...

    const handleLogin = async (credentialResponse) => {
        var obj = jwtDecode(credentialResponse.credential);
        var data = JSON.stringify(obj);
        console.log(data);

        const data = {your data to send to server};

        const config = {
          method: 'POST',
          url: 'your backend server or endpoint',
          headers: {},
          data: data
        }

      await axios(config)
    }

Spending whole day, this solve me out. Just want to share.