let me explain what I am dealing with:

I have a small app that looks like this:

I have 3 components: an input of type time, a slider, and a table with some transactions (each of them having a timestamp)

When I slide the slider, the input time changes accordingly.

When I change the input time, the slider changes position accordingly

Now, my goal is that:

when I change the input/slider position to a certain time,

then I scroll the table of an amount such that the entry which timestamp is the closest to the selected time is scrolled to the top of the table viewport

My current idea is to:

1. using the value from the slider/input, find the transaction which time is the closest to the one selected
2. find the index of this transaction in the array
3. calculate how many pixels I should scroll down with row_height * index+1
4. perform DOM manipulation to scroll the table

But I realize I am not used to perform DOM manipulation in React, so I was wondering:

is there a better approach the the one I proposed?