MadSasd, Это не настоящая вёрстка (почти), а только схематичное представление. Вы можете изучить её, убрать лишнее и попробовать использовать у себя. Я, конечно, могу дать 1 в 1 вёрстку, но разве поймёте что там?
useEffect(() => { console.log(map); }, [map]);
Вот и смотрите сколько раз рендер происходит из-за useMap. Ну и можете map === null вынести в обычную переменную до useEffect и после её уже использовать в нём.