Gapi Error in while using youtube data api in reactjs app - reactjs

Question

I have build up a project using Next.js. Here I have wanted to implement a feature using the YouTube Data API. The feature is when the user clicks the youtube connect button, a pop-up window opens and authenticates the user. After the authentication, the YouTube Data API gives a response which contains the basic info the user's channel. Sometimes it has worked fine. But, sometimes it has shown the following error:
Here is my code:
import { Fragment, useEffect, useContext } from "react";
import {gapi} from "../common/api";
import { GOOGLE_CLIENT_ID } from "../../helpers/Constants";
import { AthleteContext } from "../../context/AthleteContextProvider";
import { Button, message } from "antd";
import AthleteProfileService from "../../services/AthleteProfileService";
const YouTubeConnect = () => {
const athleteContext = useContext(AthleteContext);
function authenticate() {
return gapi.auth2.getAuthInstance()
.signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})
.then(function() { console.log("Sign-in successful"); },
function(err) { console.error("Error signing in", err); });
}
function loadClient() {
gapi.client.setApiKey(GOOGLE_API_KEY);
return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
.then(function() { console.log("GAPI client loaded for API");
execute();
},
function(err) { console.error("Error loading GAPI client for API", err); });
}
// Make sure the client is loaded and sign-in is complete before calling this method.
function execute() {
return gapi.client.youtube.channels.list({
"part": "snippet,contentDetails,statistics",
"mine": true
})
.then(function(response) {
// Handle the results here (response.result has the parsed body).
console.log("Response", JSON.parse(response.body));
athleteContext.invokeYoutubeInfo(response.body);
AthleteProfileService.connectSocialAccount({
attrName: "youtube",
attrValue: JSON.parse(response.body).items[0].id
}).then(res => {
message.success("Youtube profile link added!");
athleteContext.setProfileUpdateStatus(true);
}).catch(err => {
console.log(err);
athleteContext.setProfileUpdateStatus(false);
})
},
function(err) { console.error("Execute error", err); });
}
function executeFinal() {
authenticate().then(() => {
loadClient();
})
}
gapi.load("client:auth2", function() {
gapi.auth2.init({client_id: GOOGLE_CLIENT_ID});
});
return (
<Fragment>
{/* <button onClick={() => authenticate().then(() => loadClient())}>auth</button> */}
<Button onClick={() => executeFinal()}>Connect</Button>
</Fragment>
)
}
export default YouTubeConnect;
I have tried some solutions. But, it still shows the error. Please tell me where is the problem.
Thanks in advance.