In React, how to divert the scrolling to another element?

My APP has 3 divs: side, middle, and right.

The middle section will contain the content list of arbitrary number of items. It is set to the length of the vh. Thus, it will need to scroll when too many items are present.

The problem is when the user scroll over the side or right divs, nothing happens.

To solve, the problem, all scrolling should be diverted to the middle div, no matter where the pointer is hovering.

How can this be done in React?