Error with useGoogleLogin: `Google OAuth components must be used within GoogleOAuthProvider` about react-oauth HOT 1 CLOSED

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

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;