Right click custom context menu on selected area in Reactjs

Here I am trying to show simple context menu when user right click on respected div if he click other than this div then it show browser default context menu. I have seen some article but they showed on hole screen. Can anyone has any idea how can we achieve that? any help will be appreciated.

here is what I tried.

class CustomContextMenu extends Component {

componentDidMount() {
    document.addEventListener("click", this.handleClick);
    document.addEventListener("contextmenu", this.handleContextMenu);
}

componentWillUnmount() {
    document.removeEventListener("click", this.handleClick);
    document.removeEventListener("contextmenu", this.handleContextMenu);
}

handleClick = (e) => {
    // ...
}

handleContextMenu = (e) => {
    e.preventDefault();

    // ...
}

render() {
    <div> 
        <div> 

             // some stuff will be here... and in this area browser default context menu can open here..

       </div>
       <div id="my-menu"> 

            //on right click my custom context menu will open here...
            
           // if menu is open and user click here then menu should close or hide

       </div>
       <ul className="my-menu" style={{top: yPos, left: xPos}} >
         <li>add</li>
         <li>delete</li>
         <li>update</li>
      </ul>
    </div>
 }
}