I am trying to implement an autoscroll function. I have rendered a map where all of the constituencies of Singapore are. There is a details scrollable (on the webpage) to the right of the map. Basically, I want the scrollable to scroll to the card where the constituency names match. For example if i were to click on constituency A on the svg, the scrollable should scroll to constituency A’s details (card). I am using refs to accomplish this, however code is not functional. I have 4 components, the MapSection, where the scrollable and the svg are, the MapChart, which is the svg and the MapScrollable, which houses the MapScrollableCards which have render all the data which is fetched inside the scrollable component.