Map Tiles not loading correctly

Question

enter code hereI have used leaflet.js, maptiler and react JS for the visualize a map in my web page, but when loading the map I can see round shape loading instead of full map tile loading, what should I do for that.

I want to load correctly the leaflet JS OSM map.

export default function Maps(props) {
  const { selectPosition, radiusCircle } = props;
  const locationSelection = [selectPosition?.lat, selectPosition?.lon];
  const cityName = selectPosition?.address.city;
  const displayName = selectPosition?.display_name;
  return (
    <MapContainer
      zoom={8}
      style={{ width: "100%", height: "100%" }}
      center={position}

    >
      

<TileLayer
 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
      {selectPosition && (
        <Marker position={locationSelection} icon={icon} zoom={23}>
          <Tooltip>{cityName}</Tooltip>
          <Popup>
            {cityName} <br /> {displayName}
          </Popup>
         
        </Marker>
      )}
      <ResetCenterView
        selectPosition={selectPosition}
        radiusCircle={radiusCircle}
      />
    </MapContainer>
  );
}