Issue with OneDrive Picker V8 Integration: Invalid Client ID and MSAL Authentication Loop

I am attempting to integrate the OneDrive FilePicker V8 in my application. I followed the official documentation: https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/?view=odsp-graph-online
and used the provided sample code : https://github.com/OneDrive/samples (File-picking/Javascript-basic).
However, i’m facing few issues while running the provided sample.

When i run the file by including the correct base_url : i.e https://{tenant-name}-my.sharepoint.com, The login/signup popup opens briefly and closes automatically and
the picker does not initialize, and no further steps execute.
When i try to instead run the file without msal param login and include hard-coded accessToken, the picker opens up saying : “Invalid Client ID” (even though the correct Client ID and credentials are provided), followed by a message suggesting refreshing the page, which doesn’t resolve the issue.

Providing the entire code below:

      const baseUrl = "https://{TENANT_NAME}-my.sharepoint.com";

      function combine(...paths) {
        return paths
          .map((path) => path.replace(/^[\|/]/, "").replace(/[\|/]$/, ""))
          .join("/")
          .replace(/\/g, "/");
      }

      const params = {
        sdk: "8.0",
        entry: {
          oneDrive: {
            files: {},
          },
        },
        authentication: {},
        messaging: {
          origin: "http://localhost:3000",
          channelId: "27",
        },
        typesAndSources: {
          mode: "files",
          pivots: {
            oneDrive: true,
            recent: true,
            sharedLibraries: false,
          },
        },
        selection: {
          mode: "single",
        },
        search: {
          enabled: true,
        },
      };

      let win = null;
      let port = null;

      async function launchPicker(e) {
        e.preventDefault();

        win = window.open("", "Picker", "width=800,height=600");

        const queryString = new URLSearchParams({
          filePicker: JSON.stringify(params),
          cid: "CLIENT_ID",
        });

        const url = `${baseUrl}?${queryString}`;

        const form = win.document.createElement("form");
        form.setAttribute("action", url);
        form.setAttribute("method", "POST");
        win.document.body.append(form);

        const input = win.document.createElement("input");
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "access_token");
        input.setAttribute("value", ACCESS_TOKEN);
        form.appendChild(input);

        form.submit();

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.