I am using dummy data and some slider logic I referenced from a video for a slider component that simply switches between just two images for now.

Here is the codesandbox link if it makes things easier.

import { useState } from "react";
import { Flex, Box, Text, Image } from "@chakra-ui/react";
import styles from "./works.module.scss";

const Works = () => {
  const [currentSlide, setCurrentSlide] = useState(0);

  const data = [
    {
      id: "0",
      text: "In Progress..",
      img: "https://www.marketplace.org/wp-content/uploads/2019/08/Fake-twitter.jpg?w=1200",
    },

    {
      id: "1",
      text: "Coming Soon..",
      img: "https://www.desktopbackground.org/download/1920x1080/2011/05/16/204237_grey-gaussian-blur-wallpaper-jpg_1920x1200_h.jpg",
    },
  ];

  const length = data.length;

  const nextSlide = (length) => {
    setCurrentSlide(currentSlide === length - 1 ? 0 : currentSlide + 1);
  };

  const prevSlide = () => {
    setCurrentSlide(currentSlide === 0 ? length - 1 : currentSlide - 1);
  };

  
  return (
    <Flex justify="center" m="50px">
      <Image
        src="assets/arrow2.png"
        w="50px"
        h="50px"
        alt=""
        onClick={() => prevSlide(length)}
        className={styles.left}
      />
      <Box borderRadius="20px" w="500px" h="500px" bg="black">
        {data.map((d, index) => (
          <Flex
            className={
              index === currentSlide ? styles["slide active"] : styles.slide
            }
            m="20px"
            h="80%"
          >
            {index === currentSlide && (
              <Image className={styles.img} src={d.img} alt={d.text} w="100%" h="100%" />
            )}
          </Flex>
        ))}
      </Box>
      <Image
        src="assets/arrow2.png"
        alt=""
        w="50px"
        h="50px"
        onClick={() => nextSlide(length)}
        className={styles.right}
      />
    </Flex>
  );
};
export default Works;

However, it seems to me that the slides.active styling is not applying for some reason. Does anyone have any insight as to why this is not working correctly? Thanks!!