title: Antd dropdown menu error when hovering over menu items
body: <p>I have recently used antd styling packages for my react project. However , im facing with an issue that is similar to the one raised in here <a href="https://github.com/react-component/menu/issues/142" rel="nofollow noreferrer">github</a>.</p>
  <p>However , im not able to translate the solution they provided to my project. Here's my code:</p>
  <h1>NotificationMenu</h1>
  <pre><code>export class NotificationMenu extends Component {
        ###some business logic when mounting component########
  
      render() {
        const dropdownmenu = (            #&lt;-------- Over here i am initializing a constant for the drop down menu as per antd's recommendation.
          &lt;Menu&gt;
                this.props.notifications.notifications.map(notifications =&gt; (&lt;NotificationsListRow key={notifications.id} {...notifications} /&gt;
                ))
  
          &lt;/Menu&gt;
        );
          return (
              &lt;React.Fragment&gt;
                  &lt;Dropdown overlay={dropdownmenu} onVisibleChange={this.handleVisibleChange}
                    visible={this.state.visible} placement=&quot;bottomRight&quot; trigger={['click']}
                     overlayStyle={{maxHeight:350,overflowY:'scroll'}}&gt;
  
                  &lt;Button icon={&lt;BellFilled/&gt;} shape=&quot;circle&quot;/&gt;
  
               &lt;/Dropdown&gt;
              &lt;/React.Fragment&gt;
          )
      }
  }
     
  export default NotificationMenu;
  </code></pre>
  <p>And here is the inner child component that i use to render the 'list' of dropdownmenu items.</p>
  <h1>NotificationListRows:</h1>
  <pre><code>const {Text} = Typography
  const {Title} = Typography
  export default function NotificationsListRow(props) {
  
      return (
              &lt;Menu.Item className=&quot;notifications&quot;&gt;
              &lt;a&gt;
                  &lt;Title level={4}&gt; {props.object_type} &lt;/Title&gt;
                  &lt;Text&gt;{props.object_preview}&lt;/Text&gt;
                  &lt;Text muted&gt;{props.time}&lt;/Text&gt;
              &lt;/a&gt;
            &lt;/Menu.Item&gt;
      )
  }
  </code></pre>
  <p>However , this cause the rendering to be extremely slow and buggy. Whenever i hover over the dropdown menu item , it gives me this in the console:</p>
  <pre><code>Uncaught TypeError: onItemHover is not a function
  </code></pre>
  <p>The full trace is here:</p>
  <pre><code>MenuItem.js:80 Uncaught TypeError: onItemHover is not a function
  at MenuItem._this.onMouseEnter (MenuItem.js:80)
  at HTMLUnknownElement.callCallback (react-dom.development.js:188)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
  at invokeGuardedCallback (react-dom.development.js:292)
  at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
  at executeDispatch (react-dom.development.js:389)
  at executeDispatchesInOrder (react-dom.development.js:411)
  at executeDispatchesAndRelease (react-dom.development.js:3278)
  at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
  at Array.forEach (&lt;anonymous&gt;)
  at forEachAccumulated (react-dom.development.js:3257)
  at runEventsInBatch (react-dom.development.js:3304)
  at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
  at handleTopLevel (react-dom.development.js:3558)
  at batchedEventUpdates$1 (react-dom.development.js:21871)
  at batchedEventUpdates (react-dom.development.js:795)
  at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
  at attemptToDispatchEvent (react-dom.development.js:4267)
  at dispatchEvent (react-dom.development.js:4189)
  at unstable_runWithPriority (scheduler.development.js:653)
  at dispatchUserBlockingUpdate (react-dom.development.js:4172)
  </code></pre>
  <p>Would appreciate anyone's input , thankyou!</p>