How to style the active component to its hover state in react multi carousel

Question

Ive installed react multi carousel from here https://www.npmjs.com/package/react-multi-carousel. Here's my component toolsCardCarousel.js

import React from 'react'
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import ToolsCard from '../ToolsCard/toolsCard';
import CustomDots from './customDots';

function ToolsCardCarousel() {
    const responsive = {
        desktop: {
          breakpoint: { max: 3000, min: 1920 },
          items: 5,
        //   partialVisibilityGutter: 40,
        },
        tablet: {
          breakpoint: { max: 1024, min: 464 },
          items: 2,
        //   partialVisibilityGutter: 40,
        },
        mobile: {
          breakpoint: { max: 464, min: 0 },
          items: 1,
        //   partialVisibilityGutter: 40,
        }
      };
    return (
        <div>
            <Carousel
                autoPlay={false}
                swipeable={true}
                draggable={true}
                showDots={true}
                customDot={<CustomDots/>}
                responsive={responsive}
                infinite
                partialVisbile
                focusOnSelect={true}
            >
                <ToolsCard></ToolsCard>
                <ToolsCard></ToolsCard>
                <ToolsCard></ToolsCard>
                <ToolsCard></ToolsCard>
            </Carousel>;
        </div>
        
    )
}

export default ToolsCardCarousel

Here's toolsCard.js

import React from "react";
import PrimaryButton from "../Buttons/primaryButton";
import '../ToolsCard/toolsCard.scss'
import Images from "../../components/Images";
function ToolsCard(props) {
  const backgroundimage = {
      backgroundImage: 'url('+Images.bg7+')',
      backgroundSize:'cover'
  };
  return (
    <div className="toolcard-container">
      <div className="toolcard-container-bg" style={backgroundimage}>
        <div className="toolcard-container-bg-overlay"></div>
      </div>
        <div className="toolcard-container-logo">
          <img src={Images.blender} alt="blender logo" />
        </div>
        <div className="toolcard-container-heading">
          <h2>After Effects</h2>
        </div>
      <div className="toolcard-container-content">
        <div className="toolcard-container-content-body">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu tortor, venenatis non massa vel, faucibus porta erat. Mauris auctor et urna id finibus. Mauris et hendrerit tortor, sit amet tincidunt justo. 
          </p>
        </div>
          <div className="toolcard-container-content-button">
            <PrimaryButton type="default" text="Know More" />
          </div>
      </div>
    </div>
  );
}

export default ToolsCard;

and heres how i want to trigger the hover effect in toolsCard.scss (some codes have been left out as they arent as necessary to solving the problem)

& .active, &:hover{
    transform: scale(1.1,1.1);
  }
  & .active, &:hover &-bg{
    transform: scale(1.3,1.3);
    filter: blur(2px);
    -webkit-filter: blur(2px) brightness(1.1);

  }
  & .active, &:hover &-logo{
    transform:  scale(0.8);
    filter: brightness(0) saturate(100%) invert(71%) sepia(81%) saturate(1982%) hue-rotate(174deg) brightness(88%) contrast(97%);
    mix-blend-mode: multiply;

  }
  & .active, &:hover &-heading{
    transform:scale(1.2);
    color: $blue;
    mix-blend-mode: multiply;
  }
  & .active, &:hover &-content{
    opacity: 1;
  }

and here's customDots.js if anyone wants to know

import React from 'react'

const CustomDots = ({ onClick, active, index, carouselState }) => {
    const { currentSlide } = carouselState;
    return (
      <li style={{ background: active ? "grey" : "initial" }}>
        <button
          style={{ background: active ? "grey" : "initial" }}
          onClick={() => onClick()}
        />
      </li>
    );
  };

export default CustomDots

I want to set the active class for the toolcard-container div inside the ToolsCard component, from toolsCardCarousel.js depending on whichever element is on focus or active. I've thought about ways to do it with props but i dont know what to pass as my props!
The component structure is like this-
ToolCardCarousel
|
|____ ToolsCard
|
|____ ToolsCard(active)
|
|____ ToolsCard
|
|____ ToolsCard