Custom Controls Reset button hide on zoom reset

I have this custom component to Zoom in, Zoom out, and reset the fitBounds of the map. However, I am facing a pretty weird and annoying issue where the controls like Reset when clicked to fast keeps moving in different directions instead of the default LAT and LNG value.

I want to hide the reset button if the value has been reset to its original fitBounds state when the center has been set on init.

The same thing happens with zooming in and out when clicked too fast the map just jumps from left to right and doesn't respect the click event.

It's going too fast or something but I am not sure what causes it.

Map.tsx:

import { MapContainer, TileLayer } from "react-leaflet";

import Markers from "@/components/Markers";
import ZoomControlWithReset from "@/components/ZoomControlWithReset";

const Map = () => {
  const center: any = [51.91662, 4.4727];
  const zoom: number = 16;

  const RESET_BOUNDS = [
    [51.91662, 4.4727],
    [51.92019, 4.48006],
    [51.911781, 4.4696],
  ];

  return (
    <MapContainer
      id="map"
      center={center}
      zoom={zoom}
      zoomControl={false}
      scrollWheelZoom={false}
    >
      <TileLayer
        attribution="&copy; Friends For Brands"
        url="https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png"
      />

      <Markers />
      <ZoomControlWithReset bounds={RESET_BOUNDS} />
    </MapContainer>
  );
};

export default Map;

ZoomControlWithReset.tsx:

import { useMap } from "react-leaflet";

const ZoomControlWithReset = ({ bounds }: any) => {
  const map = useMap();

  return (
    <div className="fixed gap-1 top-2 left-2 border-0 z-[9999] flex flex-col antialiased font-bold text-center">
      <button
        className="px-4 py-2 text-2xl text-white transition duration-300 ease-in-out bg-blue-700 rounded-md hover:bg-blue-800"
        onClick={() => map.zoomIn()}
      >
        +
      </button>

      <button
        className="px-4 py-2 text-2xl text-white transition duration-300 ease-in-out bg-blue-700 rounded-md hover:bg-blue-800"
        onClick={() => map.zoomOut()}
      >
        -
      </button>

      <button
        className="px-4 py-2 text-2xl text-white transition duration-300 ease-in-out bg-blue-700 rounded-md hover:bg-blue-800"
        onClick={() => map.fitBounds(bounds)}
      >
        &#x21ba;
      </button>
    </div>
  );
};

export default ZoomControlWithReset;