AntD DatePicker panelRender inside a Menu Item Popover appears unstyled

I'm trying to render an Ant Design DatePicker using the panelRender prop, and place it inside a Popover that is triggered by a Menu Item. However, when the popover opens, the DatePicker panel appears completely unstyled — it's missing all its usual styles.

here is a code snippet of the issue,

const App = () => {
  const customRender = (panel) => {
    return (
      <Menu
        items={[
          {
            key: "today",
            label: <div>Today</div>,
          },
          {
            key: "tommorow",
            label: <div>Tomorrow </div>,
          },
          {
            key: "custom-date",
            label: (
              <Popover content={panel} trigger="click">
                <div>Custom Date</div>
              </Popover>
            ),
          },
        ]}
      />
    );
  };

  return (
    <div>
      <DatePicker
        panelRender={customRender}
        showNow={false}
        suffixIcon={<DownOutlined />}
        variant="borderless"
      />
    </div>
  );
};

Here's a minimal reproducible example on CodeSandbox: https://codesandbox.io/p/sandbox/4g7ffh

Has anyone encountered this issue before or knows how to make the DatePicker render properly with styles in this context?

Thanks in advance!

The datepicker rendered inside the Popover is not getting the right class name. Setting the overlayClassName property of the Popover to ant-picker-dropdown will solve the issue.

<Popover
  content={panel}
  trigger="click"
  overlayClassName="ant-picker-dropdown"
  overlayStyle={{ pointerEvents: "all" }}
>
  <div>Custom Date</div>
</Popover>

Check this working CodeSandbox demo.

Here is how it looks: