How to prevent a component re-render on a hover event located outside the component?

I have a behaviour that changes the opacity of an element in the page when I hover a div that wraps a react component. The behaviour works fine. However, I noticed that every time the event fires the wrapped component re-render. I want to avoid that. Is there a way to prevent this?

By the way, I am using React.memo() in the component in question.

I really appreciate any help you can provide.

Pseudo-code

• Detect if the cursor over a component
• If the hover is confirmed change the opacity of another component without re-render the wrapped component

Code

<div
  role="none"
  onMouseEnter={() => {
    setIsShown(cursorOpacity)
  }}
  onMouseLeave={() => {
    setIsShown(1)
  }}
>
  <SectionHeader />
</div>