Cannot Populate UserData

[Ed-Marcavage]

I am implementing oidc-react in my typescript react app using the ChakraUI component Lib. I am trying to Auth with Azure AD, it successfully redirects the user back to the web page (hosted locally) after authenticating. However, I cannot get UserData to populate (see screen shot). I have pasted snippets of my implementation below. The goal is to gather user info from the SAML assertion with AzureAD, which I believe should be stored in UserDate?

/src/index.tsx

root.render(
  <React.StrictMode>
    <AuthProvider
    authority="https://login.microsoftonline.com/____________________________"
    clientId="______________________"
    redirectUri="http://localhost:3002"
    loadUserInfo
    >
    <ColorModeScript />
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
    </AuthProvider>
  </React.StrictMode>
);

simply return useAuth to the console for testing/seeing the UserData values
/src/App.tsx

export const App = () => {
  const auth = useAuth();
  console.log(auth)
....