Card Slide up animation in ReactJS

Question

I'm creating a Card view animation when the user presses the current card's Button, the next Card wants to show up the next, i used overflow: hidden; so, currently one card view can visible by the user, but after the implementation, nothing changing, what went wrong with this code?

PointsPage.tsx

import { useState } from "react";
import Card from "./PointsPage";
import style from "../../styles/Home.module.css";


const ProfilePage = ()=>{
  const [currentCard, setCurrentCard] = useState(0);
  const cardData = [
    { id: 1, title: 'Card 1', content: 'Content for Card 1' },
    { id: 2, title: 'Card 222', content: 'Content for Card 2' },
    { id: 3, title: 'Card 322222', content: 'Content for Card 3' },
  ];

  const handleNextCard = () => {
    setCurrentCard((prevCard) => prevCard + 1);
  };


    return(
      <div className={style.pageView}>
      {cardData.map((card, index) => (
        <Card
          key={card.id}
          title={card.title}
          content={card.content}
          isActive={index === currentCard}
          onNext={handleNextCard}
        />
      ))}
    </div>
    );
};

export default ProfilePage;

PointsPage.tsx

interface PointsPageProps{
    title:string,
    content:string,
    isActive:boolean,
    onNext:()=>void,
}

const PointsPage = ({ title, content, isActive, onNext }:PointsPageProps) => {

    const handleClick = () => {
        onNext();
      };
   
  return (
    <div className={style.questionCard}>
         <div className={`card ${isActive ? 'active' : 'inactive'}`}>
      <h2>{title}</h2>
      <p>{content}</p>
      <Button onClick={handleClick}>Next</Button>
      </div>
   </div>
  );
};

export default PointsPage;