React Modal not closing when used with react leaflet

Question

After rendering the map container inside the modal component, everything works fine. But when we click on one of the zoom in and out buttons and then click on the overlay, the modal does not close on the first click. It works fine if I click anywhere else in the map but not after I click on the zoom buttons.

import { useState } from 'react';
import ReactModal from 'react-modal';
import { MapContainer } from 'react-leaflet/MapContainer';
import { TileLayer } from 'react-leaflet/TileLayer';

function App() {
  const [isOpenModal, setIsOpenModal] = useState<boolean>(false);

  const handleClick = () => {
    setIsOpenModal(true);
  };

  return (
    <>
      <button onClick={handleClick}>Open React Leaflet</button>
      <ReactModal
        isOpen={isOpenModal}
        onRequestClose={() => setIsOpenModal(false)}
        parentSelector={() => document.body}
      >
        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          style={{
            height: '50dvh',
            width: '50dvw',
          }}
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
        </MapContainer>
      </ReactModal>
    </>
  );
}

export default App;