How to use @arcgis/map-components with ArcGIS Enterprise?

[MapNat]

I installed @ArcGIS/map-components.

I want to view a simple webmap.

import '@arcgis/map-components/components/arcgis-map';

export default function MapView() {
  return (
    <arcgis-map
      // portal-url='https://my-portal-url.com/portal'
      item-id='abc123c5f0314db9a487a9b46cb37eca'
      style={{ height: '400px' }}
    ></arcgis-map>
  );
}

I get something like:

Failed to load web map

Failed to load portal item

https://www.arcgis.com/sharing/rest/content/items/abc123c5f0314db9a487a9b46cb37eca 

Item does not exist or is inaccessible.

Fair enough, because my webmap is not on ArcGIS Online; I'm using ArcGIS Enterprise.

How can I indicate that my portal URL is https://my-portal-url.com/portal ?

I tried adding a portal-url property to arcgis-map (commented out above) but it didn't change anything.

I tried loading the portal URL with @ArcGIS/core esriConfig first and it didn't change anything.

import { useEffect } from 'react';
import esriConfig from '@arcgis/core/config';
import '@arcgis/map-components/components/arcgis-map';

export default function MapView() {
  useEffect(() => {
    esriConfig.portalUrl = 'https://my-portal-url.com/portal';
  });

  return (
    <div style={{ width: '100%', height: '400px' }}>
      <arcgis-map item-id='abc123c5f0314db9a487a9b46cb37eca' style={{ height: '400px' }}></arcgis-map>
    </div>
  );
}

Seems very basic, maybe silly... what am I missing?

Thanks in advance for your help!

[ReneRubalcava]

Set the `esriConfig.portalUrl` outside the useEffect, probably at the top of the page. In apps, I usually set this in the main entry point file or maybe in the `globalThis.esriConfig` before the map components are used.