I have a problem in my frontend under React js and openlayers Bingmap, the map does not load

Question

The satellite map does not load while the octagon does. I think I checked everything and I think my code is correct this is my code :

import React, { useEffect, useState } from 'react';
import Container from '@mui/material/Container';
import logo from '../src/img/Alldem3.png';
import './AllDemande.css';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { styled } from '@mui/system';
import VisibilityIcon from '@mui/icons-material/Visibility';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import Map from 'ol/Map';
import View from 'ol/View';
import { fromLonLat, transform } from 'ol/proj';
import LineString from 'ol/geom/LineString';
import Stroke from 'ol/style/Stroke';
import Style from 'ol/style/Style';
import TileLayer from 'ol/layer/Tile';
import BingMaps from 'ol/source/BingMaps';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import 'ol/ol.css';

function AllDemande() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedItem, setSelectedItem] = useState(null);
  const [showForm, setShowForm] = useState(false);

  useEffect(() => {
    if (selectedItem && selectedItem.id_terrain && selectedItem.id_terrain.coordinatesText) {
      const coordinates = selectedItem.id_terrain.coordinatesText;
      const map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new BingMaps({
              key: 'MySerialKey',
              imagerySet: 'Aerial',
            }),
          }),
        ],
        view: new View({
          center: fromLonLat([-6.605081, 34.200794]),
          zoom: 12,
        }),
      });
  
      const coordinatesArray = coordinates
        .split('\n')
        .map((coord) => coord.split(',').map(parseFloat));
  
      // Ajouter le premier point comme dernier point du tableau
      coordinatesArray.push(coordinatesArray[0]);
  
      const transformedCoordinates = coordinatesArray.map((coord) =>
        transform(coord, 'EPSG:4326', 'EPSG:3857')
      );
  
      const lineString = new LineString(transformedCoordinates);
  
      const stroke = new Stroke({
        color: 'rgba(255, 0, 0, 1)',
        width: 2,
      });
  
      const style = new Style({
        stroke,
      });
  
      const vectorLayer = new VectorLayer({
        source: new VectorSource({
          features: [
            new Feature({
              geometry: lineString,
            }),
          ],
        }),
        style: style,
      });
  
      const mapLayers = map.getLayers();
      mapLayers.clear();
      mapLayers.push(vectorLayer);
    }
  }, [selectedItem]);
  
  return (
    <>

      {showForm && selectedItem && (
        <div className="form-container">
          <Container maxWidth="sm">
            <Box
              sx={{
                bgcolor: 'White',
                padding: '30px',
                border: '1px solid gray',
                borderRadius: '8px',
                boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)',
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                marginTop: '420px',
                width: '700px',
              }}
            >
            <GreenTop>
              <GreenHeading>Données de la demande</GreenHeading>
            </GreenTop>
              <div id="map" style={{ height: '300px', margin: '10px 0' }}></div>
              
      )}
    </>
  );
}

export default AllDemande;

a screenshot of my problem where the map does not load :

I checked everything and it looks correct to me:

• the bingmap api key
• the code in a new project
• dependencies
• imports
• the version of ol