How to create a carousel wih images React Typescript

its not really a question but answer, Ive tried to find by myself for like 3 days or so and finally I did. While doing researches I realised there is no answer across a stackoverflow.

Lets start with a question, how to create a "carousel" like function with images. We have a MainPage.tsx and some images.

import { useState } from "react";
import Book1 from "./books/MyBook1";
import Book2 from "./books/MyBook2";
import Book3 from "./books/MyBook3";
import Book4 from "./books/MyBook4";
import Book5 from "./books/MyBook5";
import "./MainPage.css";
const MainPage = () => {
const books = [
<Book1 />,
<Book2 />,
<Book3 />,
<Book4 />,
<Book5 />
];
const [currentIndex, setCurrentIndex] = useState<number>(0);
return (
<div className="carousel-container">
{books.map((book, index) => (
<div
key={index}
className={carousel-slide ${                             index === currentIndex ? &quot;active&quot; : &quot;inactive&quot;                         }}
>
{book}
</div>
))}
</div>
);
};
export default MainPage;

It might have some errors but a right one will be in answers so CHECK ANSWERS FOR THE RIGHT CODE. Does it really matters what in the MyBook1,2,3,4,5 tsx files has, well not really but still

import "./css/bolashakBook.css"
import { useState } from "react"
import { Box, Modal } from "@mui/material";
import PDFFILE from "../../assets/images/mybook1.pdf"
const MyBook1 = () => {
const [ isFrameOpen, setIsFrameOpen ] = useState(false);
const handleOnClickFrame = () => {
setIsFrameOpen(!isFrameOpen)
}
return (
<div className="book1-container">
<Modal open={isFrameOpen} onClose={() => setIsFrameOpen(false)}>
<Box>
<iframe
id="inlineFramePDF"
title="PDF"
className="iframe-element"
width="300"
height="400"

src={PDFFILE}
></iframe>
</Box>
</Modal>
<div className="book1-container">
<img
src={MyBookImage}
className="book1-image"
onClick={handleOnClickFrame}
alt="My book one"
></img>
</div>
</div>
)
}
export default MyBook1; ```
CHECK THE ANSWERS THAK YOU FOR THE CSS thank you!