React Carousel

import logo from './logo.svg';
import './App.css';
import React ,{useState} from "react";

function App() {
const images = [array of Image links];
const [Image,setImage] = useState(0);

const nextfn = ()=> setImage(Image == images.length-1 ? 0 : Image + 1);

const prefn = () => setImage(Image == 0 ? images.length-1 : Image - 1);

**_

• return (
• {images.map((item,index) => Image == index &&
• )}
• Previous
• Next
• );
• } _**

export default App;

CSS

*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

button{
padding: 12px;
font-size: 17px;
border: none;
background-color: rgba(11, 5, 0, 0.607);
color: white;
border-radius: 50px;
cursor: pointer;
margin: 20px;
}
.button{
margin: 20px 200px;
}
button:hover{
background-color: rgba(11, 5, 0, 0.895);
}
img{
width: 600px;
height: 370px;
border-radius: 2px;
}