Map is hidden on NextJS

I am following this guide: Adding TomTom Maps to a Modern React App.

Following is my code:

    const mapElement = useRef();
    const [mapLongitude, setMapLongitude] = useState(123.12);
    const [mapLatitude, setMapLatitude] = useState(32.231);
    const [mapZoom, setMapZoom] = useState(13);
    const [map, setMap] = useState({});

    useEffect(() => {
        const analytics = getAnalytics(firebase);

        onAuthStateChanged(auth, async (user) => {

            tt = (await import('@tomtom-international/web-sdk-maps')).default

            if (user) {
                uid = user.uid

            db = getFirestore(firebase);

            ({eventid} = router.query);
            if(!eventid) {

            const docSnap = await getDoc(docRef);
            if (!docSnap.exists()) {
            } else {




                let map ={
                    key: process.env.NEXT_PUBLIC_TOMTOM_API_KEY,
                    container: mapElement.current,
                    center: [mapLongitude, mapLatitude],
                    zoom: mapZoom
                // updateMap();
                return () => map.remove();


    }, [router]);

This is what I see when I go into inspect element:

The map is not visible on the screen at all. I have also imported the CSS file.

Did you set the size of the map div?

@maloleps Hi turns out it’s a CSS issue. Thanks!

Do you know how I can add a pinpoint to the coordinates?

check examples here: Map examples | Maps SDK Web JS v6
use hamburger menu - choose Markers → Custom markers