I have an application with menu and submenu. The submenu is supposed to display on mouse enter and it should remain on the screen so that i can navigate to the submenu. I am using onMouseEnter and 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>
    );
}

Is there a way to make the display still remain so i can choose a sub menu and when I leave the main div, It disappears.