Error with useGoogleLogin: Google OAuth components must be used within GoogleOAuthProvider

[Infinitay]

import React from "react";
import { GoogleOAuthProvider, useGoogleLogin } from "@react-oauth/google";

const CLIENT_ID = process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID || "";

interface props {
	setAccessToken: React.Dispatch<React.SetStateAction<string>>;
}

const Authorize: React.FC<props> = ({ setAccessToken }) => {
	const login = useGoogleLogin({
		onSuccess: (tokenResponse) => console.log(tokenResponse),
	});

	return (
		<GoogleOAuthProvider clientId={CLIENT_ID}>
			<div id="authorizeButton">
				<button onClick={() => login()} />
			</div>
		</GoogleOAuthProvider>
	);
};

export default Authorize;

Uncaught Error: Google OAuth components must be used within GoogleOAuthProvider

Getting the following error above with the respective code. I am using useGoogleLogin so I can manually define the scope's I require of the user. I didn't have any issuing using GoogleLogin within GoogleOAuthProvider. I'm encountering this error only when using useGoogleLogin.

Is this a bug or am I not properly implementing the auth?

[Infinitay]

Found the problem, it was as the stacktrace was saying. I can't define login as I did in the example above having it outside the scope of GoogleOAuthProvider.

	const login = useGoogleLogin({
		onSuccess: (tokenResponse) => console.log(tokenResponse),
	});

I resolved this by explicitly following the example and creating a custom component for useGoogleLogin.

import React from "react";
import { GoogleOAuthProvider, GoogleLogin, useGoogleLogin, TokenResponse, CodeResponse } from "@react-oauth/google";
import GoogleLoginButton from "./GoogleLoginButton";

const CLIENT_ID = process.env.REACT_APP_GOOGLE_OAUTH_CLIENT_ID || "";

interface props {
	setAccessToken: React.Dispatch<React.SetStateAction<string>>;
}

const Authorize: React.FC<props> = ({ setAccessToken }) => {
	return (
		<div id="authorizeButton">
			<GoogleOAuthProvider clientId={CLIENT_ID}>
				<GoogleLoginButton />
			</GoogleOAuthProvider>
		</div>
	);
};

export default Authorize;

import React from "react";
import { useGoogleLogin } from "@react-oauth/google";

const GoogleLoginButton: React.FC = () => {
	const login = useGoogleLogin({
		onSuccess: (tokenResponse) => console.log(tokenResponse),
	});

	return (
		<div>
			<button onClick={() => login()}>Login with google✌</button>
		</div>
	);
};

export default GoogleLoginButton;