material ui basic gallary

import React from 'react'
import IconButton from '@material-ui/core/IconButton';
import { render } from 'react-dom';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';
import { Divider, Typography } from '@material-ui/core';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
import CloseTwoToneIcon from '@material-ui/icons/CloseTwoTone';
import { red } from '@material-ui/core/colors';
const useStyles = makeStyles((theme) => ({

    root: {

        width: '100%', padding: "4%", height: '240px',
        borderRadius: "22px", transition: '200ms',
        padding: "0px ", overflow: "scroll", spaceBetween: "20px",
        overflowX: 'hidden', background: "#fff",

    },
    modal: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center', outline: 'none'
    },
    closeIcon: {
        transform: "scale3d(2.31, 2.31, 1)", imageShadow: `2px 2px 12px  #ff6a00`,
        margin: '1% 89%', '&:hover': {
            transform: "scale3d(3.31, 3.31, 1)",
        },
    },
    icon: {
        transform: "scale3d(2.31, 2.31, 1)",
        Color: 'red',
        '&:hover': {
            transform: "scale3d(3.31, 3.31, 1)",
        },

    },
    img: {
        width: '160px', margin: "10px 25px",
        borderRadius: "22px", transition: '200ms',
        border: "solid #fff 4px", borderImageWidth: "22px",
        boxShadow: `2px 2px 12px  #ff6a00`,
        '&:hover': {
            transform: "scale3d(1.31, 1.31, 1)",
        },
    }, modalRoot: {
        outline: 0, 
        padding: theme.spacing(2, 4, 3), outline: 'none'
    },
    paper: {
        backgroundColor: theme.palette.background.paper,
        border: '2px solid #000', maxWidth: '100vw',
        boxShadow: theme.shadows[5], overflow: 'hidden', outline: 0,
        padding: theme.spacing(2, 4, 3), outline: 'none'
    },
    imgFull: {
        margin: "10px 25px",width:'85%', maxWidth: '1200px',
        borderRadius: "22px", transition: '200ms',
        border: "solid #fff 4px", borderImageWidth: "22px",
        boxShadow: `2px 2px 12px  #ff6a00`,

    },
}));

const Images = [
    {
        imgSrc: 'https://i.stack.imgur.com/XW25s.jpg',
    },
    {
        imgSrc: 'https://abload.de/img/theskelligeislesypj5k.jpg',
    },
    {
        imgSrc: 'https://www.gamerevolution.com/assets/uploads/2019/08/Metro-Exodus-Screenshot-2019.02.14-12.21.54.92.png',
    },
    {
        imgSrc: 'https://abload.de/img/shadowofthecolossus_2rcj0s.jpg',
    },
    {
        imgSrc: 'https://bloody-disgusting.com/wp-content/uploads/2019/06/control.jpg',
    },

    {
        imgSrc: 'https://www.gamerevolution.com/assets/uploads/2019/08/Metro-Exodus-Screenshot-2019.02.14-12.21.54.92.png',
    },
    {
        imgSrc: 'https://abload.de/img/shadowofthecolossus_2rcj0s.jpg',
    },
    {
        imgSrc: 'https://bloody-disgusting.com/wp-content/uploads/2019/06/control.jpg',
    },
]

const ScreenShotsDisplayer = () => {
    const classes = useStyles();
    const [open, setOpen] = React.useState(false);
    let [imgID, setimgID] = React.useState(0);
    const handleOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };
    
    function imageClick(id, event) {
        console.log("Clciked " + id);
        setimgID(id);
        setOpen(true);
        
    }

    const totalImages = Images.length;

    function next() {
        imgID++;
        setimgID(imgID);
        if (imgID > totalImages-1) setimgID(0); 
        console.log("next" + imgID);
    }
    function previous() {
        imgID--;
        setimgID(imgID);
        if (imgID < 0) setimgID(totalImages-1);
        console.log("previous" + imgID);
    }
    return (

        <div className={classes.root}>

            {
                Images.map((img, id) =>
                    <img onClick={(e) => imageClick(id, e)} className={classes.img}
                        key={id}  src={img.imgSrc} />
                )
            }

            <Modal disablePortal
                disableEnforceFocus
                disableAutoFocus
                open={open}
                onClose={handleClose} className={classes.modal}
                closeAfterTransition
                BackdropComponent={Backdrop}
                BackdropProps={{
                    timeout: 300,
                }}
                aria-labelledby="simple-modal-title"
                aria-describedby="simple-modal-description"
            >
                <div className={classes.modalRoot}>
                  
                    <Grid container justify='center'>
                        <Paper elevation={2} className={classes.paper}>
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                <IconButton className={classes.closeIcon} color="secondary" aria-label="Next" component="span">
                                    <CloseTwoToneIcon onClick={handleClose} ></CloseTwoToneIcon>
                                </IconButton>
                            </div>
                            <Divider />
                            <div style={{ display: 'flex', alignItems: 'center',width:'100%' }}>
                                <IconButton onClick={() => { previous() }}   className={classes.icon} color="secondary" aria-label="Next" component="span">
                                    <ArrowBackIosIcon /> </IconButton>
                                <img className={classes.imgFull} key={imgID}
                                    src={Images[imgID].imgSrc} />
                                <IconButton onClick={() => { next() }} className={classes.icon} color="secondary" aria-label="Next" component="span">
                                    <ArrowForwardIosIcon />
                                </IconButton>

                             
                            </div>
                            <Divider />
                            <Typography gutterBottom='true' color="secondary" variant='h5'> {imgID + 1} / {totalImages}</Typography>
                            <Divider />
                        </Paper>
                    
                    </Grid>
                </div>

            </Modal>
        </div>
    )
}

export default ScreenShotsDisplayer

learned and implemented in 4 hours.