The submenu cannot hide after animation end or mouse leave

source code:

import * as React from 'react';
import Menu, { SubMenu, MenuItem } from 'rc-menu';
import classNames from 'classnames';
import 'rc-menu/assets/index.css';

const horizontalMotion = {
  motionName: 'rc-menu-open-slide-up',
  motionAppear: true,
  motionEnter: true,
  motionLeave: true
};

const children = [
  <MenuItem key="1">认识小新</MenuItem>,
  <SubMenu key="2" title="到店体验">
    <MenuItem key="2-1">2-1</MenuItem>
  </SubMenu>,
  <SubMenu key="3" className="submenu" title="关于我们">
    <MenuItem key="3-1">企业介绍</MenuItem>
    <MenuItem key="3-2">媒体中心</MenuItem>
    <MenuItem key="3-3">加入我们</MenuItem>
  </SubMenu>,
  <SubMenu key="4" title="探索更多">
    <MenuItem key="4-1">4-1</MenuItem>
  </SubMenu>
];

export default class CustomMenu extends React.PureComponent {
  render() {
    this.config = {
      triggerSubMenuAction: 'hover',
      mode: 'horizontal',
      defaultMotions: { horizontal: horizontalMotion }
    };
    return (
      <Menu defaultActiveFirst {...this.config}>
        {children}
      </Menu>
    );
  }
}

Start by reproducing the behavior with the provided CustomMenu example and inspect the submenu hover and motion handling used by rc-menu. Verify the animation and mouse-leave paths, then confirm that the submenu hides reliably after animation completion or when the pointer leaves.