Css antd 中的子菜单项不可滚动

try 使用以下代码将子菜单项设置为可滚动

Codesandbox链接:https://codesandbox.io/s/dazzling-antonelli-t4g3nu?file=/index.js

import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Menu, Icon } from "antd";

const { SubMenu } = Menu;

function handleClick(e) {
  console.log("click", e);
}

const options = [
  { key: "1", value: "option1" },
  { key: "2", value: "option12" },
  { key: "3", value: "option13" },
  { key: "4", value: "option14" },
  { key: "5", value: "option15" },
  { key: "6", value: "option16" },
  { key: "7", value: "option17" },
  { key: "8", value: "option18" },
  { key: "9", value: "option19" },
  { key: "10", value: "option134" },
  { key: "11", value: "option132" },
  { key: "12", value: "option142" },
  { key: "13", value: "option123" }
];


ReactDOM.render(
  <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
    <SubMenu
      key="sub4"
      title={
        <span>
          <Icon type="setting" />
          <span>Navigation Three</span>
        </span>
      }
    >
      <div style={{ height: "100px", overflow: "scroll" }}>
        {options?.map((data) => {
          return <li style={{ lineHeight: "20px" }}> {data?.value} </li>;
        })}
      </div>
    </SubMenu>
  </Menu>,
  document.getElementById("container")
);

即使存在滚动图标，子菜单中显示的项目也不可滚动，需要一些帮助来修复它. 谢谢.