How to remove css property from prev and next element

Question

https://jsfiddle.net/emjqn9gs/15/

I have a table with head and body and the body has separators(lines)

For example, I have (numbers are rows)

1
_
2
_
3

When I hover on second row I want to hide top and bottom line;

When I hover on third row I only hide top line.

I use React and I can solve this issue but it will have lots of rerenders since I have to rerender styles for each element(remove border)

I also can give to all of my row references (using useRef) and then on hover find nextElementSibling and previousElementSibling but I don't think it is very performant

What is the best approach to hide buttons on hover or click?