Is it possible to scale a marker onClick without re-rendering the map?

[thenoobgrammer]

Hello, so I have this piece of code. I can select a marker and it will scale by the scale factor I pass it. However, it re-renders the map every time I click on one. Does anyone know if there's a way to counter this?

Map.tsx:

const Map: FC<MapProps> = () => {
	const dispatch = useDispatch()
	const theme = useTheme()
	const { markers } = useMarkers()
	const { googleAPIKey } = useEnvVariables()
	const { mapStyles } = useMapStyles()
	const { lat, lng } = useConnectedUserPosition()

	const options: google.maps.MapOptions = {
		styles: mapStyles,
		disableDefaultUI: true,
		zoomControl: true,
	}

	const mapContainerStyle = useMemo(
		() => ({
			height: `calc(100vh - 2 * ${theme.mixins.toolbar.minHeight}px)`,
		}),
		[theme],
	)

	const { isLoaded, loadError } = useJsApiLoader({
		id: 'google-map-script',
		googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY || '',
	})

	const ActivityMap = (): JSX.Element => {
		/**
		 * TODO - Decide what to do with onLoad
		 */
		const onLoad = useCallback((mapInstance) => {}, [])
		/**
		 * TODO - Decide what to do with tileOnLoad (also runs every time you move the map)
		 */
		const onTilesLoaded = useCallback(() => {}, [])
		return (
			<GoogleMap
				key={googleAPIKey}
				zoom={10}
				mapContainerStyle={mapContainerStyle}
				center={{ lat, lng }}
				onLoad={onLoad}
				onTilesLoaded={onTilesLoaded}
				options={options}
			>
				{markers?.map((marker, idx) => (
					<Marker
						key={idx}
						{...marker}
						onClick={() => dispatch(setSelectedMarker(marker.activityId))}
						icon={{
							url: '/picture.png',
							scaledSize: new google.maps.Size(marker.scaleFactor, marker.scaleFactor),
						}}
					/>
				))}
			</GoogleMap>
		)
	}

	if (loadError) {
		return (
			<Box>
				<Typography>There was an error loading the map</Typography>
			</Box>
		)
	}

	return isLoaded ? <ActivityMap /> : <CircularProgress />
}

useMarkers.ts:

const useMarkers = (): { markers: MarkerInfo[] } => {
	const markersProps = useSelector((state: AppState) => state.markers)
	const [markers, setMarkers] = useState<JSX.Element[] | any>()

	useEffect(() => {
		const MarkersArray = markersProps?.map((marker, idx) => ({
			activityId: marker.activityId,
			position: { lat: marker.lat(), lng: marker.lng() },
			scaleFactor: marker.selected ? 64 : 32,
		})) as MarkerInfo[]

		setMarkers(MarkersArray)
	}, [markersProps])

	return { markers }
}