Link to a `ref` in another component in React - reactjs

Question

I have a footer component in my React app which contains links to different sections of the website.
Instead of lots of different components to render for each section, I am just making a main component for each section and then within this component there are different parts of the page. i.e
First page
section 1
section 2
section 3
If I want to be able to click a link on the footer to take me to section 3 of the first page, is this possible? Currently I wrote the code in the footer to take me to a new route,
<Grid item xs={12} sm={3}>
<Typography variant='h6'>Golf</Typography>
<List>
<ListItem component={NavLink} color='text.secondary' to='/section-1' sx={{textDecoration:'none', color: 'black'}}>Section 2</ListItem>
<ListItem component={NavLink} color='text.secondary' to='/section-2' sx={{textDecoration:'none', color: 'black'}}>Section 2</ListItem>
</List>
</Grid>
But now I want it to take me to a route '/firstpage' and then to section 1 on that page.
On each page I have all the sections wrapped in a div with a ref and using the useRef hook
const section1 = useRef(null);
const section2 = useRef(null);
const scrollToSection = (elementRef: any) => {
window.scrollTo({
top: elementRef.current.offsetTop - 110,
behavior: 'smooth'
})
}
return (
<>
<div ref={section1}>
//code
</div>
<div ref={section2}>
//code
</div>
</>
)
On each page I have a basic nav system at the top so when I click on a link it scrolls to the relevant section using the scrollToSection function onClick={() => scrollToSection(section2)}
Can I use what I already have to be able to let a user click on a link in the footer and it will take them to the correct route and then automatically scroll to that section.