Material-UI DateCalendar Closes When Interacting with Year/Month Dropdowns in React

I am working on a React component that uses Material-UI’s DateCalendar. The component includes an input field that, when clicked, opens a date picker. The date picker should remain open while the user interacts with it, and when user click somewhere outside the datepicker, the datepicker should be closed.

My current solution is from How can I prevent onBlur event from firing?. It works fine in most cases. When user interacts with most of the area of datepicker, the datepicker remains open, when user click outside of the datepicker, the datepicker closed.

However, I am encountering an issue where the date picker closes when the user interacts with the year or month dropdown menus.

My code:

import { DateCalendar, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { useState } from "react";

function App() {
  const [open, setOpen] = useState(false);

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

  const handleBlur = () => {
    setOpen(false);
  };

  const handleMouseDown = (event) => {
    event.preventDefault();
  };

  return (
    <>
      <input id="dateInput" onClick={handleClick} onBlur={handleBlur} />
      {open ? (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DateCalendar onMouseDown={handleMouseDown} />
        </LocalizationProvider>
      ) : null}
    </>
  );
}

export default App;

What I expected:

The date picker should remain open while the user interacts with it, and when user click somewhere outside the datepicker, the datepicker should be closed.