I am using React to build a map component, setup looks good considering I followed the example by the Mapbox team here and here

But I get a blank page when the component mounts, I have seen a series of similar issues here and here none seem to solve my problem.

see my code sample

import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
import { Box } from '@mui/system';

import { useEffect, useRef, useState } from 'react';

import { useDispatch, useSelector } from 'react-redux';
import '../components/propertyMap.css';

const PropertyMap = () => {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const dispatch = useDispatch();
     
  const [property_id, setProperty_id] = useState('');

  const onChange = (e) => {
    setProperty_id(e.target.value);
  };

  mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_TOKEN;
  useEffect(() => {
    if (!mapboxgl.supported()) {
      alert('Your browser does not support Mapbox GL');
    }
    if (map.current) return;
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: 'mapbox styles here',
      center: [6.459964, 7.548949],
      zoom: 14,
      attributionControl: true,
      interactive: true,
      customAttribution: '©',
      boxZoom: true,
    });

    map.current.setCenter([6.459964, 7.548949]);

    // mapboxgl.boxZoomCursor = 'grab';
    map.current.boxZoom.enable();
    map.current.addControl(
      new mapboxgl.NavigationControl(),
      'top-right'
    );
    map.current.addControl(
      new mapboxgl.AttributionControl({ compact: true })
    );
    map.current.resize();
    return () => map.current.remove();
  }, [property]);

  return (
      
        
      
  );
};

export default PropertyMap;