Markers are Flikering in React #1197

I have a problem with the markers and its consistently flickering and i dont know whats going on
here is the code
`import React, { useEffect, useMemo, useState } from "react";
import "../Map/map.css";
import {
GoogleMap,
LoadScript,
GoogleMapProps,
MarkerF,
Marker,
} from "@react-google-maps/api";
import { DeliverymanService, RestaurantsService } from "kauai-super-app-client-module/client-web";
import { useCoordsContext } from "../../context/coordsContext";

const Map = () => {
const refMap = React.useRef(null);

const [map, setMap] = React.useState(null);
const [mapKey, setMapKey] = useState(new Date().getTime());
const [markers, setMarkers] = useState([]);
const [markersRestaurant, setMarkersRestaurant] = useState([]);

const { coords, addCoords } = useCoordsContext();

const position = useMemo(() => ({ lat: -11.857491, lng: -55.50621 }), []);
const containerStyle = {
width: "98%",
height: "100%",
marginLeft: "5px",
};

useEffect(() => {
if (coords != null) {
try {
if (map && markers.length > 0) {
const bounds = new window.google.maps.LatLngBounds();
bounds.extend(coords);
map.fitBounds(bounds);
const maxZoom = map.getZoom();
map.setZoom(14);
}
} catch (error) {
console.log(error);
}
}
}, [coords]);

useEffect(() => {
DeliverymanService.getAllDeliveryman()
.then((response) => {
const simplifiedItems = response.data.map((item) => ({
id: item._id.$oid,
name: item.name,
position: {
lat: parseFloat(item.current_location.latitude),
lng: parseFloat(item.current_location.longitude),
},
}));
setMarkers(...markers, simplifiedItems);
})
.catch((error) => {
console.log(error);
});

RestaurantsService.returnAllRestaurants().then((response) => {
  const simplifiedItems = response.data.map((item) => ({
    id: item._id.$oid,
    name: item.name,
    position: {
      lat: parseFloat(item.latitude),
      lng: parseFloat(item.longitude),
    },
  }));
  setMarkersRestaurant(...markersRestaurant, simplifiedItems);
}).catch((error) => {
  console.log(error);
});

setInterval(() => {
  DeliverymanService.getAllDeliveryman()
    .then((response) => {
      const simplifiedItems = response.data.map((item) => ({
        id: item._id.$oid,
        name: item.name,
        position: {
          lat: parseFloat(item.current_location.latitude),
          lng: parseFloat(item.current_location.longitude),
        },
      }));
      setMarkers(...markers, simplifiedItems);
    })
    .catch((error) => {
      console.log(error);
    });
  RestaurantsService.returnAllRestaurants().then((response) => {
    const simplifiedItems = response.data.map((item) => ({
      id: item._id.$oid,
      name: item.name,
      position: {
        lat: parseFloat(item.latitude),
        lng: parseFloat(item.longitude),
      },
    }));
    setMarkersRestaurant(...markersRestaurant, simplifiedItems);
  }).catch((error) => {
    console.log(error);
  });
}, 3000);

}, []);

const onUnmount = React.useCallback(function callback() {
// setMap(null);
}, []);

function MarkerDelivery() {
return (
<>
{markers.map((value) => {
return (
<>
<Marker
key={String(value.id)}
position={{ lat: value.position.lat, lng: value.position.lng }}
options={{
optimized: true,
visible: true,
label: {
text: value?.name === undefined ? "Não identificado" : value?.name,
className: "marker-label",
}
}}
icon={{
url: "https://bohocasasstorage.blob.core.windows.net/boho-casas/pin_delivery.png",
scaledSize: new window.google.maps.Size(70, 80),
}}
/>
</>
);
})}
</>
);
}

function MarkerRestaurant() {
return (
<>
{markersRestaurant.map((value) => {
return (
<>
<Marker
key={String(value.id)}
position={{ lat: value.position.lat, lng: value.position.lng }}
options={{
optimized: true,
visible: true,
label: {
text: value?.name === undefined ? "Não identificado" : value?.name,
className: "marker-label",
}
}}
icon={{
url: "https://bohocasasstorage.blob.core.windows.net/boho-casas/pin_restaurant.png",
scaledSize: new window.google.maps.Size(70, 80),
}}
/>
</>
);
})}
</>
);
}

function FitToMarkersDeliveryMans() {
try {
if (map && markers.length > 0) {
const bounds = new window.google.maps.LatLngBounds();

    markers.forEach((marker) => {
      bounds.extend(marker.position);
    });

    map.fitBounds(bounds);
    console.log(bounds.Ia.hi);
    console.log(bounds.Ia.lo);
  }
} catch (error) {
  console.error(error);
}

}

function FitToMarkersRestaurants() {
try {
if (map && markers.length > 0) {
const bounds = new window.google.maps.LatLngBounds();

    var cpMarkers = Object.assign([], markers);
    cpMarkers.push(...markersRestaurant);

    cpMarkers.forEach((marker) => {
      bounds.extend(marker.position);
    });

    map.fitBounds(bounds);
    console.log(bounds.Ia.hi);
    console.log(bounds.Ia.lo);
  }
} catch (error) {
  console.error(error);
}

}

return (
<>

<GoogleMap
mapContainerStyle={containerStyle}
center={position}
zoom={14}
key={mapKey}
ref={refMap}
streetView={false}
options={{
streetViewControl: false,
// mapTypeId: "satellite",
}}
onLoad={(mapdata) => {
setMap(mapdata);
}}
onUnmount={onUnmount}
>
{markers.length > 0 && (
<>


</>
)}
{

          <div className="custom-tools">
            <button
              onClick={FitToMarkersDeliveryMans}
              className="buttom-custom-tools"
            >
              Todos Motoboys
            </button>
          </div>

        </div>
      }
    </GoogleMap>
  </LoadScript>
</>