How to set an an active class to a variable - React

My first question on S.O. let's see how it goes.

I'm trying to set the "active class" to a variable in my Home.js, and pass down the value, as a prop to my <Buddy /> component. Once there I will set that to an integer to decide what slide my text carousel goes to. I'll figure out that part (but if you know, spare me the time).

I'm using an npm package react-scroll to scroll to that component once clicked. Then the component is set to "active". I will drop some code.

1. Nav bar section in the Home.js component..

return (
<div className="navBar">

   <div className="navItem">
        <Link
           activeClass='active'
           to="home"
           spy={true}
           smooth={true}
           offset={0}
           className='nav-Link'>
            <h2>Home</h2>
        </Link>
    </div>
       
    <div className="navItem">
       <Link
           activeClass='active'
           to="projects"
           spy={true}
           smooth={true}
           offset={0}
           className='nav-Link'>
               Projects
        </Link>
     </div>
       
     <div className="navItem">
       <Link
           activeClass='active'
           to="mission"
           spy={true}
           smooth={true}
           offset={0}
           className='nav-Link'>
               Mission
        </Link>
      </div>
       
     <div className="navItem">
       <Link
           activeClass='active'
           to="about"
           spy={true}
           smooth={true}
           offset={0}
           className='nav-Link'>
               About
        </Link>
     </div>
       
     <div className="navBar">
       <Link
           activeClass='active'
           to="contact"
           spy={true}
           smooth={true}
           offset={0}
           className='nav-Link'>
               Contact
        </Link>
     </div>

</div>

2. My component sitting right beneath.

<Buddy />

3. Each component on my SPA/Portfolio has an id that the on my nav bar looks to go to.

//Projects.js

const Projects = () => {
    return (
        <div className="projectsComponent" id="projects">
            
        </div>
    )
}

So when it scrolls to the component, it sets that div? or component? to active.

// back in Home.js

<div className="navItem">
        <Link
            activeClass='active' <-----------
            to="projects"
            spy={true}
            smooth={true}
            offset={0}
            className='nav-Link'>
                Projects
            </Link>
        </div>

I just want to set whatever I need to, into a variable in Home.js to pass down as a prop to <Buddy />. Thanks, guys! Remember it's my first question ever! Be nice!

** If you have a better idea, like when the scroll reaches that component, set the index of my carousel to 1,2,3.. let me know too. Thanks

*** I will also include my <SpeechCarousel /> component here. It lives in my <Buddy /> component and ill pass another prop to it. Thanks again.

import React, {useState} from 'react'
import Carousel from 'react-bootstrap/Carousel'
import "../styles/css/Buddy.css"

const SpeechCarousel = () => {
    const [index, setIndex] = useState(0);
  
    const handleSelect = (selectedIndex, e) => {
      setIndex(selectedIndex);
    };

    return (
        <div id="carousel2">
      <Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
        
        <Carousel.Item className="car2item">
          <p>TEXT</p>
        </Carousel.Item>

        <Carousel.Item className="car2item">
        <p>TEXT</p>
        </Carousel.Item>

        <Carousel.Item className="car2item">
        <p>TEXT</p>
        </Carousel.Item>

        <Carousel.Item className="car2item">
        <p>TEXT</p>
        </Carousel.Item>

        <Carousel.Item className="car2item">
        <p>TEXT</p>
        </Carousel.Item>

     </Carousel>

      </div>
    )
}
export default SpeechCarousel;