Moving picture like a carousel

SO here is the deal, I have a typescript project that looks like this

---

const MainPage = () => {
const allBooks = [, , , , ];
const [currentIndex, setCurrentIndex] = useState(0);

const moveLeft = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + allBooks.length) % allBooks.length);
};

const moveRight = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % allBooks.length);
};

return (
    <div className="body-container">
        <div className="left-button-container">
            <button className="left-button" onClick={moveLeft}>
                LEFT
            </button>
        </div>

        <div id="bannerBooks">
            {allBooks.map((book, index) => (
                <div
                    key={index}
                    className={`book-container ${
                        index === currentIndex ? "active" : "inactive"
                    }`}
                >
                    {book}
                </div>
            ))}
        </div>

        <div className="right-button-container">
            <button className="right-button" onClick={moveRight}>
                RIGHT
            </button>
        </div>
    </div>
);

};

export default MainPage;

---

As you can see I have elements like books, and I want to create a function that will be working like a carousel for example
buttonLeft Book1 book2 book3 book4 book5 buttonRight
when you press buttonLeft the book in the middle moves to the left and book that was on the right moves to the center and the same with the right button, so I will try to visualize it
buttonLeft Book1 book2 book3 book4 book5 buttonRight
button left pressed
buttonLeft Book2 book3 book4 book5 book1 buttonRight
button left pressed again
buttonLeft Book3 book4 book5 book1 book2 buttonRight
And the same for right button, I know I can use chatGPT but I DONT USE IT ON PURPOSE FOR NOT BECOMING A CHATGPT SENIOR, thank you everyone for the attention 🙂