How to make in React so that when you hover over the left side of the site, the right one becomes darker and vice versa?

Question

JavaScript

Hello.
I would like to ask knowledgeable people how to implement the following code in a React application? It's just that the problem is that I still have a fairly superficial understanding of React and Babel syntax. And the code itself may be needed soon in the implementation together with React.
The task is this:
There is a main page of the site, on one side (left) there is a list of goods for women on the second (right) for men, when I move the mouse over the left side, the right side becomes darker, and vice versa, if I hover over the right side, then the left one becomes darker.
Something like this:
mouse on the left side:

mouse on the right side:

Sample code (HTML, CSS, JS).

<div id="left">
</div>


<div id="right">
</div>

let left = document.getElementById('left');
let right = document.getElementById('right');

left.addEventListener('mouseover', () => {
  right.classList.add('dark');
});
left.addEventListener('mouseleave', () => {
  right.classList.remove('dark');
});

right.addEventListener('mouseover', () => {
  left.classList.add('dark');
});
right.addEventListener('mouseleave', () => {
  left.classList.remove('dark');
});

#left{
    height: 940px;
    width: 50%;
    position: absolute;
    top:0px;
    
    
}
#right{
    height: 940px;
    width: 50%;
    position: absolute;
    top:0px;
    left:50%;
}
.dark {
  background-color: rgba(0,0,0,0.5);
}

Answer 1

<div id="app"></div>

function App() {
  const [ dark, setDark ] = React.useState(null);
  const updateDark = e => setDark(e.type === 'mouseover' ? e.currentTarget.id : null);

  return (
    <React.Fragment>
      {[ 'left', 'right' ].map(n => (
        <div
          id={n}
          key={n}
          onMouseOver={updateDark}
          onMouseLeave={updateDark}
          className={dark && dark !== n ? 'dark' : ''}
        ></div>
      ))}
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));