I can't integrate the filepicker sharepoint with react app. Its not loading the files on popup opening

Question

I am trying to integrate the sharepoint with my app by following the Microsoft guide. I can't figure out why the filepicker window is opening but not showing any files. It sometimes show

"PrefetchFailure (3001000,invalid_client)" or "Initialization timed out after 40000ms".

const sharePointBaseUrl = 'https://tenant.sharepoint.com';

const openSharepoint = (accessToken, options, baseUrl) => {

let port = null;
const win = window.open('', 'Picker', 'width=1080,height=680');

const queryString = new URLSearchParams({
  filePicker: JSON.stringify(options),
  locale: 'en-us',
});

const accessToken = await getToken(baseUrl);

const url = `${baseUrl}/_layouts/15/FilePicker.aspx?${queryString}`;

const form = win.document.createElement('form');
form.setAttribute('action', url);
form.setAttribute('method', 'POST');
const tokenInput = win.document.createElement('input');

tokenInput.setAttribute('type', 'hidden');
tokenInput.setAttribute('name', 'access_token');
tokenInput.setAttribute('value', accessToken);

form.appendChild(tokenInput);
win.document.body.append(form);
form.submit();

window.addEventListener('message', (event) => {
  if (event.source && event.source === win) {
    const message = event.data;

    if (message.type === 'initialize' && message.channelId === options.messaging.channelId) {
      port = event.ports[0];

      port.addEventListener('message', messageListener);

      port.start();

      port.postMessage({
        type: 'activate',
      });
    }
  }
});

------------ end of open share point function----------

async function messageListener(message) { switch (message.data.type) { case 'notification': console.log(notification: ${message.data}); console.log(message); break;

    case 'command':

      port.postMessage({
        type: 'acknowledge',
        id: message.data.id,
      });

      const command = message.data.data;

      switch (command.command) {
        case 'authenticate':

          // getToken is from scripts/auth.js
          const token = accessToken;

          if (typeof token !== 'undefined' && token !== null) {
            port.postMessage({
              type: 'result',
              id: message.data.id,
              data: {
                result: 'token',
                token,
              },
            });
          }
          else {
            console.error(`Could not get auth token for command: ${JSON.stringify(command)}`);
          }

          break;

        case 'close':

          win.close();
          break;

        case 'pick':

          console.log(`Picked: ${JSON.stringify(command)}`);

          document.getElementById('pickedFiles').innerHTML = `<pre>${JSON.stringify(command, null, 2)}</pre>`;

          port.postMessage({
            type: 'result',
            id: message.data.id,
            data: {
              result: 'success',
            },
          });

          win.close();

          break;

        default:

          console.warn(`Unsupported command: ${JSON.stringify(command)}`, 2);

          port.postMessage({
            result: 'error',
            error: {
              code: 'unsupportedCommand',
              message: command.command,
            },
            isExpected: true,
          });
          break;
      }

      break;
  }
}

};

const openSharePointPopUp = () => { getAccessToken('sharepoint').then((token) => {// get the access token and open the popup

  const channelId = uuidv4(); 

  const options = {
    sdk: '8.0',
    entry: {
      sharePoint: {
        files: {},
      },
    },
    authentication: {},
    messaging: {
      origin: 'http://localhost:3010',
      channelId,
    },
    typesAndSources: {
      mode: 'all',
      filters: ['.aspx'],
      pivots: {
        recent: false,
        oneDrive: false,
      },
    },

  };
  openSharepoint(token, options, sharePointBaseUrl);
});

};

const sharePointApp = () => { checkIntegration('sharepoint').then((res) => { const authToken = Storage.getData('jwt_token');

   if (!res) {                             // if integration don't exist trying to integrate
    const payload = {
      provider: 'sharepoint',
      token: authToken,
    };
        integrate(payload).then((res) => {
        window.open(res.data.redirect_uri, '_blank');
    });
  }
 
    openSharePointPopUp();                 // already integrated open the sharepoint app
    return res;
});

};

The control starts from OpenSharePoint