I am new to map APIs and recently I started using react-leaflet to display coordinates, with OpenMap as the Base Map. I followed tutorials but my map constantly shows grey. I realized that the TileLayer Component is not loading as the attribution does not show on the grey map. Inspection of the elements in browser also shows empty leaflet tiles. Can someone advise? I have no idea what is wrong

my React js file

import'./css/map.css';
import mappic from '../assets/routemap.png';
import useScript from '../useScriptHead.js';
import { MapContainer, TileLayer } from 'react-leaflet';

function Map () {   

    const position= [1.332873308, 103.7669705];
    useScript("https://cdn.onemap.sg/leaflet/onemap-leaflet.js");
    return (        
        /* <div className="map-area scrollable">
            <img className="map" src={mappic} alt="Not Available" /> 
        </div> */
            <MapContainer 
                center={[1.34, 103.8]} 
                maxNativeZoom={18} 
                minZoom={11}
                whenReady={ ()=> {
                    console.log("This function will fire once the map is created")
                }}
                scrollWheelZoom={false}>
                <TileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                attribution='<img src="https://www.onemap.gov.sg/docs/maps/images/oneMap64-01.png" style="height:2%;width:2%;"/> OneMap | Map data &copy; contributors, <a href="http://SLA.gov.sg">Singapore Land Authority</a>'
                detectRetina='true'
                />
            </MapContainer>
    );
  };
  
  export default Map;

my css file

.map-area {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.scrollable {
    overflow-x: hidden;
    overflow-y: auto;
}

.leaflet-container {
    position: absolute;
    overflow: visible;
    height: 100vh;
    width: 100vh;
}

Browser Inspector