How can I pass IdentifyManager credentials to a Calcite avatar?

[JohnPhillipsGeo]

I'm new to Experience builder dev edition and I've been attempting to create some simple widgets using Calcite. 

I've been error handling by outputting the error to text beside my avatar.  I would like to grab the thumbnail and user name from Esri's Identity manager

I'm signed in through portal.  However, it is displaying this error.  I've also tried it through AGO.

Any advice would be much appreciated!

My widget.tsx file:

import React, { useState, useEffect } from 'react';
import { AllWidgetProps } from 'jimu-core';
import { CalciteAvatar } from 'calcite-components';
import esriConfig from '@arcgis/core/config';
import IdentityManager from '@arcgis/core/identity/IdentityManager';
import Portal from '@arcgis/core/portal/Portal';

const Widget = (props: AllWidgetProps<any>) => {
  const [thumbnailUrl, setThumbnailUrl] = useState('');
  const [fullName, setFullName] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    // Set the ArcGIS portal URL
    esriConfig.portalUrl = 'https://myorg.maps.arcgis.com';

    // Check if the user is signed in to ArcGIS Online
    IdentityManager.checkSignInStatus(esriConfig.portalUrl + '/sharing')
      .then((credential) => {
        if (credential) {
          // Get the user's Portal object
          const portal = new Portal({ url: esriConfig.portalUrl });
          portal.load().then(() => {
            // Get the user's thumbnail URL from the portal user object
            const thumbnail = portal.user && portal.user.thumbnailUrl;
            // Set the thumbnail URL in the state
            setThumbnailUrl(thumbnail);
            // Set the full name in the state
            setFullName(portal.user.fullName);
          });
        } else {
          setError('User not signed in');
        }
      })
      .catch((error) => {
        console.error('Error checking sign-in status:', error);
        setError(error.message);
      });
  }, []);

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <CalciteAvatar thumbnail={thumbnailUrl} scale="m" />
      <span style={{ marginLeft: '10px' }}>{error || fullName}</span>
    </div>
  );
};

export default Widget;