Tengo una aplicación con menú y submenú. Se supone que el submenú se muestra al ingresar con el mouse y debe permanecer en la pantalla para que pueda navegar hasta el submenú. estoy usando onMouseEnter y onMouseLeave

 import React, {useState} from "react"; export default function ShowButtonHover() { const [style, setStyle] = useState({display: 'none'}); return ( <div className="App"> <div style={{border: '1px solid gray', width: 300, height: 300, padding: 10, margin: 100}} onMouseEnter={e => { setStyle({display: 'block'}); }} onMouseLeave={e => { setStyle({display: 'none'}) }} > <p>Show Sub Menu</p> </div> <div style={style}> <div><a href='/sub-1'>Sub Menu 1</a></div> <div><a href='/sub-2'>Sub Menu 2</a></div> </div> </div> ); }

¿Hay alguna manera de hacer que la pantalla permanezca para que pueda elegir un submenú y cuando dejo el div principal, desaparece?