Scroll to an element from another component React Typescript

I have a Landing component where all my components, such as my NavBar, services etc., are grouped together. I did this to prevent my Landing component from being too big.

However, I’d like it to scroll directly to my Services component when I click on the Services link in my NavBar.

I can’t see how to do this with external components. Could someone help me? Thanks

import React, {useEffect, useRef} from 'react';
import LandingNavBar from "./components/LandingNavBar";
import Header from "./components/Header";
import {initFlowbite} from 'flowbite'
import Services from "./components/Services";

function Landing() {
    useEffect(() => {
        initFlowbite()
    }, []);

    return (
        <div>
            <LandingNavBar/>
            <Header/>
            <Services/>
        </div>
    );
}

export default Landing;

>Solution :

Did you try to use #id with anchor tag
check examples:

1. https://www.geeksforgeeks.org/how-to-redirect-to-a-particular-section-of-a-page-using-html-or-jquery/
2. React change view and then scroll to element