How do I linking page sections to other page sections with react

Am trying to link these card items

to this page

in such a way that when I click ground on services it takes me to ground section on the logistics page, air card at services screen to air section at the logistics page, sea card at services screen to sea section at the logistics page

our services section

import React from 'react'
import { Link } from 'react-router-dom'
import './HomeService.css'

const HomeService = () => {
    return (
        <div className="home-service">
            <div className="home-service-topics">
                <h2 className="home-service-topic-h2">Our Services</h2>
                <h3 className="home-service-topic-h3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h3>
            </div>
            <div className="home-service-content">
                <Link to="/logistics#transport"  className="home-service-content-cards">
                    <div className="home-service-content-card-image-1">

                    </div>
                    <div className="home-service-content-card-text">
                        <h4 className="home-service-card-h4"> Ground </h4>
                        <p className="home-service-card-p">We offer cargo transport services within East and Central Africa for containerized...Find out more</p>
                    </div>
                </Link>

                <Link to="/logistics#air"  className="home-service-content-cards">
                    <div className="home-service-content-card-image-2">

                    </div>
                    <div className="home-service-content-card-text">
                        <h4 className="home-service-card-h4"> Air </h4>
                        <p className="home-service-card-p">Bloomstar Logistics enjoys strategic partnerships with over ten different air carriers...Find out more</p>
                    </div>
                </Link>

                <Link to="/logistics#ocean"  className="home-service-content-cards">
                    <div className="home-service-content-card-image-3">

                    </div>
                    <div className="home-service-content-card-text">
                        <h4 className="home-service-card-h4"> Sea </h4>
                        <p className="home-service-card-p">We work with an established network of over ten different ocean carrier partners...Find out more</p>
                    </div>
                </Link>
            </div>
        </div>
    )
}

export default HomeService

the logistics

import React from 'react'
import './Air.css'
import Plane from '../../../assets/plane.jpg'

const Air = () => {
    return (
        <div className="air" id="air">
            <div className="l-section-upper">
                <h3 className="l-section-image-h4">Air</h3>
                <p className="l-section-p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
            <div className="l-section-content">
                <div className="l-content-image">
                    <img className="l-image" src={Plane} alt="Air plane for logistics"/> 
                </div>

                <div className="l-content-content">
                    <p className="l-content-p">
                        For time-sensitive shipments we’re ready to offer a complete range of one-stop-shop for airfreight services. 
                        Bloomstar Logistics enjoys strategic partnerships with over ten different air carriers in each region to ensure that 
                        we can offer you many airfreight options. With this broad selection of air services, we give you an end-to-end logistics 
                        management solution that reduces transportation costs, improves communication among all parties and accelerates 
                        decision-making.
                    </p>
                    <ul className="l-content-ul">
                        <li className="l-content-li">
                            Partnerships with an exclusive network of partners worldwide to offer end to end services
                        </li>
                        <li className="l-content-li">
                            Competitive rates – we utilize hundreds of airline flights daily and you don’t have to be limited 
                            to designated pickup or delivery times;
                        </li>
                        <li className="l-content-li">
                            Door-to-door, Airport-to-Door, Airport-to-Airport;
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Air

How do I achieve this functionality and is it possible to use ids?