Create a Google Form in a Serverless React App

Question

I am trying to create a Google Form in a serverless React application. I could authenticate, but whenever I try to create the form, the error "403 insufficient scope" comes up. I already authorised all the scopes there are in the Google OAuth consent screen, however, the same error comes up and I cannot figure out how to solve this.

Details of the error: error code: 403 details: Array(1) 0: {@type: 'type.googleapis.com/google.rpc.ErrorInfo', reason: 'ACCESS_TOKEN_SCOPE_INSUFFICIENT', domain: 'googleapis.com', metadata: {…}} length: 1 [[Prototype]]: Array(0) message: "Request had insufficient authentication scopes." status: "PERMISSION_DENIED"

My index.js:

<GoogleOAuthProvider clientId=`${cliendID}`>
  <React.StrictMode>
   
      <AppRouter />
   
  </React.StrictMode>
  </GoogleOAuthProvider>

My code in the component CreateForm.jsx:

`import react, {Component, useEffect, useState} from "react"; import { googleLogout, useGoogleLogin } from '@react-oauth/google'; import axios from 'axios';

export default function CreateForm() {

  const login = useGoogleLogin({
        onSuccess: async response => {
            try {
                const data = await axios.get(
                    'https://www.googleapis.com/oauth2/v3/userinfo', {
                    headers: {
                        "Authorization": `Bearer ${response.access_token}`
                    }
                })
                console.log(data);
                await createGoogleForm();
            } catch (err) {
                console.log(err)
            }
        },
        scopes: ["https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/forms.body"],
    });

    const createGoogleForm = async () => {
      // Load the GAPI client first
      loadClient()
        .then(() => {
          // After the GAPI client is loaded, execute the creation of the Google Form
          execute();
        });
    };
      const loadClient = () => {
        window.gapi.client.setApiKey(`${apiKey}`);
        return window.gapi.client.load("https://forms.googleapis.com/$discovery/rest?version=v1")
          .then(() => {
            console.log("GAPI client loaded for API");
          })
          .catch((err) => {
            console.error("Error loading GAPI client for API", err);
          });
        }
      
    
      const execute = () => {
        window.gapi.client.forms.forms.create({
          "resource": {
            "info": {
              "title": "Form Example"
            }
          }
        })
          .then((response) => {
            console.log("Response", response);
          })
          .catch((err) => {
            console.error("Execute error", err);
          });
      };
    

    useEffect(() => {
    
      login();
     
    }, []);
  

  return (
    <div>
      <button onClick={login}>Authorize and Load</button>
    
    </div>
  );
};