How to render the react-leaflet-map component in react-testing-library?

Question

I am using the react-leaflet-map in custom page like this:

export default function LeafletMap({ latitude, longitude}: props) {
const [gmapsLoaded, setGmapsLoaded] = useState(false);
 const initMap = () => {
        setmapLoaded (true);
    };
    useEffect(() => {
document.querySelector('script[src^="https://maps.googleapis.com"]');
        
        const script = document.createElement('script');
        script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_MAP_API_KEY}&libraries=places`;
        script.async = true;
        script.onload = initMap; // Call initMap once the script is loaded
        script.nonce = 'ils+vsV+OAN1z2QUGBzoyQ==';
        document.body.appendChild(script);
        
        return () => {
            document.body.removeChild(script);
        };
    }, []);
return (<>
                {gmapsLoaded && (
                    <div>
                        <MapContainer>
                            <TileLayer url={''} />
                            <DraggableMarker />
                        </MapContainer>
                    </div>
                )}
            </>
}

This is my basic blueprint . this component i am using in another page(or how to test this page directly then also it is ok) where I am unit testing the page but the map is not rendered in the test case.
I have used this solution also :https://stackoverflow.com/a/73637243/21109719

how should I render the map in the test case?

Thanks