react components keeps re-rendering - reactjs

Question

hey everyone I'm having re-render issues with my component. every time page loads CISW308Assignment5 component renders. Then the .map functions renders 5 times. After that user is prompted for using geolocation services, and everything re-renders again.
the idea behind this madness:
on page load user is prompter for geolocation. it is stored incase user will later request directions to any of the places. page has dropdown list of some places. each dropdown contains basic info about the place. phone info is a link, and on a mobile device when clicked on; will prompt user if they want to initiate a call. address info is a link to that place on google maps. show map button opens a modal, and with the pre-coded coordinates the map center and pins that location. the modal contains get direction button which when you click on sends user to google maps website. along with the redirect it sends your coordinates and the places coordinates to get the directions.
CISW305Assignment5.tsx
import React, { useEffect, useState } from 'react';
import type { FC } from 'react';
import { Helmet } from 'react-helmet';
import Template from 'layout/Template';
import Assignment from 'components/Assignment';
import ExtraCredit from 'components/ExtraCredit';
import Submissions from 'components/Submissions';
import { Accordion, Image } from 'semantic-ui-react';
import { Boudin, Chilis, InNout, PandaExpress, PaneraBread } from 'assets';
import MapModal from 'components/MapModal';
import { v4 as uuidv4 } from 'uuid';
const assignment = [
{
completed: true,
name: 'a clickable “SHOW MAP” buttons or links for 2 or more Locations that opens a “map page” for each of your food locations.'
}
];
const extracredit = [
{
completed: true,
name: `a clickable “GET DIRECTIONS” link or button on each map page, that links to another map with directions from the users' current location to the restaurant location.`
}
];
const favoritePlaces = [
{
id: uuidv4(),
src: Boudin,
name: 'Boudin Bakery',
phoneNumber: '[phone]',
phoneNumberLink: 'tel:[phone]',
address: '2573 Fair Oaks Blvd, Sacramento, CA 95825',
addressLink:
'https://www.google.com/maps/place/Boudin+SF/#38.5749736,-121.4019994,17z/data=!3m1!4b1!4m5!3m4!1s0x809ada557d7929af:0x4b8201a127d64751!8m2!3d38.5749736!4d-121.4019994',
placeCoords: { lat: 38.57498557564539, lng: -121.40199854938247 }
},
{
id: uuidv4(),
src: InNout,
name: 'In-N-Out',
phoneNumber: '[phone]',
phoneNumberLink: 'tel:[phone]',
address: '3501 Truxel Rd, Sacramento, CA 95834',
addressLink: 'https://goo.gl/maps/5rtssiGZb2KyLQpKA',
placeCoords: { lat: 38.63682135923305, lng: -121.5041714687768 }
},
{
id: uuidv4(),
src: Chilis,
name: `Chili's`,
phoneNumber: '[phone]',
phoneNumberLink: 'tel:[phone]',
address: '3870 Truxel Rd, Sacramento, CA 95834',
addressLink: 'https://goo.gl/maps/iFCDnk23ywRSH5HN7',
placeCoords: { lat: 38.6385674159852, lng: -121.50372754232959 }
},
{
id: uuidv4(),
src: PandaExpress,
name: 'Panda Express',
phoneNumber: '[phone]',
phoneNumberLink: 'tel:[phone]',
address: '3571 N Freeway Blvd, Sacramento, CA 95834',
addressLink: 'https://goo.gl/maps/qwzi1SxXbahKDNKd8',
placeCoords: { lat: 38.640220171851546, lng: -121.4999965846592 }
},
{
id: uuidv4(),
src: PaneraBread,
name: 'Panera Bread',
phoneNumber: '[phone]',
phoneNumberLink: 'tel:[phone]',
address: '3571 N Freeway Blvd, Sacramento, CA 95834',
addressLink: 'https://goo.gl/maps/erkno1X3d68db3BK9',
placeCoords: { lat: 38.6402061514062, lng: -121.50000428469711 }
}
];
const CISW308Assignment5: FC = () => {
const [userCoords, setUserCoords] = useState<{
lat: number;
lng: number;
}>({
lat: 0,
lng: 0
});
const [activeIndex, setActiveIndex] = useState(0);
useEffect(() => {
setActiveIndex(0);
}, []);
useEffect(() => {
const getLocation = () => {
navigator.geolocation.getCurrentPosition(
({ coords }) => setUserCoords({ lat: coords.latitude, lng: coords.longitude }),
({ message }) => {
alert(`${message}. Please try enabling Geolocation services.`);
},
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
}
);
};
const getUserLocation = () => {
if (navigator.permissions && navigator.permissions.query) {
navigator.permissions.query({ name: 'geolocation' }).then(function (result) {
const permission = result.state;
if (permission === 'granted' || permission === 'prompt') {
getLocation();
}
});
} else if (navigator.geolocation) {
getLocation();
} else {
alert("Unfortunately geolocation services aren't supported by your browser");
}
};
getUserLocation();
}, []);
// eslint-disable-next-line #typescript-eslint/no-explicit-any
const handleClick = (e: any, titleProps: any) => {
const { index } = titleProps;
const newIndex = activeIndex === index ? -1 : index;
setActiveIndex(newIndex);
};
console.log('i rendered');
return (
<>
<Helmet>
<title>CISW 308 - Assignment 5</title>
</Helmet>
<Template>
<Assignment assignment={assignment} />
<ExtraCredit assignment={extracredit} />
<Submissions>
<Accordion fluid styled style={{ maxWidth: '550px' }}>
{favoritePlaces.map((place, index) => {
console.log('i rendered');
return (
<div key={place.id}>
<Accordion.Title active={activeIndex === index} index={index} onClick={handleClick}>
<Image style={{ maxWidth: '30px' }} src={place.src} />
{place.name}
</Accordion.Title>
<Accordion.Content active={activeIndex === index}>
Phone Number: <a href={place.phoneNumberLink}>{place.phoneNumber}</a>
<br />
Address:{' '}
<a target='_blank' rel='noopener noreferrer' href={place.addressLink}>
{place.address}
</a>
<br />
<MapModal placeCoords={place.placeCoords} userCoords={userCoords} />
</Accordion.Content>
</div>
);
})}
</Accordion>
</Submissions>
</Template>
</>
);
};
export default CISW308Assignment5;
MapModal.tsx
import React, { useState } from 'react';
import type { FC } from 'react';
import { Button, Modal } from 'semantic-ui-react';
import MapContainer from './MapContainer';
const MapModal: FC<{
userCoords: {
lat: number;
lng: number;
};
placeCoords: {
lat: number;
lng: number;
};
}> = ({ placeCoords, userCoords }) => {
console.log('🚀 ~ file: MapModal.tsx ~ line 18 ~ userCoords', userCoords);
console.log('🚀 ~ file: MapModal.tsx ~ line 20 ~ placeCoords', placeCoords);
const [open, setOpen] = useState(false);
const handleClick = () => {
try {
window.open(
`https://www.google.es/maps/dir/'${userCoords?.lat},${userCoords?.lng}'/'${placeCoords?.lat},${placeCoords?.lng}'`,
'_blank',
'noopener,noreferrer'
);
} catch ({ message }) {
console.error(message);
}
};
return (
<Modal
closeIcon
open={open}
trigger={<Button>SHOW MAP</Button>}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
>
<Modal.Header style={{ textAlign: 'center' }}>
<Button onClick={handleClick}>GET DIRECTIONS</Button>
</Modal.Header>
<Modal.Content>
<Modal.Description>
<MapContainer placeCoords={placeCoords} />
</Modal.Description>
</Modal.Content>
</Modal>
);
};
export default MapModal;
MapContainer.tsx
import React from 'react';
import type { FC } from 'react';
import { GoogleMap, LoadScript, Marker } from '#react-google-maps/api';
const MapContainer: FC<{
placeCoords: {
lat: number;
lng: number;
};
}> = ({ placeCoords }) => {
console.log('🚀 ~ file: MapContainer.tsx ~ line 11 ~ placeCoords', placeCoords);
const mapStyles = {
height: '500px',
width: '100%'
};
return (
<div>
<LoadScript googleMapsApiKey='API_KEY'>
<GoogleMap mapContainerStyle={mapStyles} zoom={18} center={placeCoords}>
<Marker position={placeCoords} />
</GoogleMap>
</LoadScript>
</div>
);
};
export default MapContainer;
on page load:
image
page ui:
image
map modal:
image
thank you for any and all help in advance.