React中Material-UI DateCalendar点击年月下拉菜单时自动关闭的问题求助

我最近在开发一个React组件，用到了Material-UI的DateCalendar组件。这个组件包含一个输入框，点击输入框会打开日期选择器，我原本期望的是：用户和日期选择器交互的时候它保持打开状态，一旦点击选择器之外的区域，就自动关闭。

我目前用的处理方案，在大部分场景下都能正常工作——点击日期选择器的大部分区域，它都会保持打开；点击外部区域，也能顺利关闭。但现在遇到了一个头疼的问题：当用户点击选择器里的年份或者月份下拉菜单时，日期选择器居然会直接关闭，这完全不符合预期。

下面是我的代码：

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;

我想要达到的理想效果是：不管用户和日期选择器的哪个部分交互（包括年月下拉菜单），选择器都保持打开状态，只有点击选择器外部区域时才会关闭。

备注：内容来源于stack exchange，提问作者jingwei jiang