Problem connecting to OneDrive File Picker v8

I'm trying to integrate the OneDrive File Picker v8 API into a SPA project but I keep getting an error in connecting to the picker which I can't decipher.

Here's what the error from the popup window of the picker looks like

I'm following the provided Javascript basic consumer sample to get things started but I'm having no luck so far, configuring the sample app like in the code block below with both the provided Azure Client ID and a personal Azure Client ID I set up following the Picker docs still results in the same issue as the image above.

// 'javascript-basic-consumer/scripts/auth.js'
const msalParams = {
    auth: {
        authority: "https://login.microsoftonline.com/consumers",
        clientId: {"2ab80a1e-7300-4cb1-beac-c38c730e8b7f" or "my-client-id"},
        redirectUri: "http://localhost:3000"
    },
}

Scrolling through the dev console for the picker I see the following error:

plt.odsp-common.js:1 GraphError: ObjectHandle is Invalid
    at t.a (res-1.cdn.office.net/files/odsp-web-prod_2023-10-27.002/odcfilepickerwebpack.manifest/plt.odsp-common.js:1:286129)
    at t [as constructor] (res-1.cdn.office.net/files/odsp-web-prod_2023-10-27.002/odcfilepickerwebpack.manifest/plt.odsp-common.js:1:24023)
    at new t (res-1.cdn.office.net/files/odsp-web-prod_2023-10-27.002/odcfilepickerwebpack.manifest/plt.odsp-common.js:1:62054)
    at res-1.cdn.office.net/files/odsp-web-prod_2023-10-27.002/odcfilepickerwebpack.manifest/plt.odsp-common.js:1:249215
    at e.then (res-1.cdn.office.net/files/odsp-web-prod_2023-10-27.002/odcfilepickerwebpack.manifest/plt.odsp-common.js:1:90280)
    at res-1.cdn.office.net/files/odsp-web-prod_2023-10-27.002/odcfilepickerwebpack.manifest/plt.odsp-common.js:1:248860
    at Object.A [as _notify] (res-1.cdn.office.net/files/odsp-web-prod_2023-10-27.002/odcfilepickerwebpack.manifest/plt.odsp-common.js:1:86424)
    at Object.enter (res-1.cdn.office.net/files/odsp-web-prod_2023-10-27.002/odcfilepickerwebpack.manifest/plt.odsp-common.js:1:88881)
    at e._run (res-1.cdn.office.net/files/odsp-web-prod_2023-10-27.002/odcfilepickerwebpack.manifest/plt.odsp-common.js:1:94087)
    at e._error (res-1.cdn.office.net/files/odsp-web-prod_2023-10-27.002/odcfilepickerwebpack.manifest/plt.odsp-common.js:1:93595)

and I see that the picker is making API calls to an unauth route like https://api.onedrive.com/v1.0/drives/unauth/items/root?{queryParams} even though the Authorization headers are provided correctly.

And the weirdest part is that I know the provided sample code works correctly as I have managed to get it working previously, this issue only recently showed up as I was revisiting the code.

I would appreciate if someone with more knowledge about how the OneDrive file picker works could provide some insight on just what is going on with my issue.

It seems that the issue lies in the cid value being passed to the picker not being valid.

Try including 'cid' in the parameters when opening the picker.

Like this

const queryString = new URLSearchParams({
  filePicker: JSON.stringify(params),
  cid: 'CID VALUE',
});
const url = `${baseUrl}?${queryString}`;

The cid value seems to came from oid of id tokens.

It's formatted as a uuid, but just remove the dashes and only use the last half of the string. Eg: idTokenClaims.oid.replace(/-/g, "").slice(16).

As you know, originally, this value was not required to be set by the developer. it seems there might be an issue on the v8 SDK side.