React popup and session issue for microsoft oauth login

Question

I'm banging my head recently over this very weird issue , where the popup doesn't get closed after receiving the authorization code as well as there's some unwanted session gets stored which gives me an error for state mismatch on the same auth URL access. Can I get some help to resolve these . I've added the code below for reference.

Thank you.

  const handleMicrosoftLogin = async () => {
    try {
      await sessionStorage.clear()
      const res = await getOutlookAuthURL()
      const authURL = res.signup
      const popup = window.open(authURL, '_blank', 'width=600,height=600')
      if (popup) {
        popupRef.current = popup
        window.addEventListener('message', (event) => {
          // Ensure the message is from the popup and has data
          console.log('event', event)
          if (event.source === popup && event.data) {
            popupRef.current?.close()
            queryClient.invalidateQueries(QueryKeys.MAILBOX)

            // Remove the event listener after the popup is closed
            window.removeEventListener('message', noop)
          }
        })
      }
      setIsAddEmailModalOpen(false)
      //queryClient.invalidateQueries(QueryKeys.MAILBOX)
    } catch (err: any) {
      console.log(err.message)
    }
  }