I have a sidebar in the web app and when the cursor hovers it sidebar expands and when the cursor leaves it collapses. I attach my console screenshot in 15sec re-render trigger a lot. But while hovering all parts of the sidebar state continue to change. how can I stop continuing re-rendering of components? Here is the code and you can see it in the console also. CodeSandbox link

  const [state, setState] = useState({
    sidebarClass: ''
  });

  const onHandleMouseOver = () => {
    setState(pre => ({
      ...pre,
      sidebarClass: 'expend'
    }))
  }
  const onHandleMouseLeave = () => {
    setState(pre => ({
      ...pre,
      sidebarClass: 'collapse'
    }))
  }

  console.log('component re-render')

  return (
    <div 
    onMouseOver={onHandleMouseOver}
    onMouseLeave={onHandleMouseLeave}

    className={`App ${state.sidebarClass}`}
    >
      
    </div>
  );