Material UI Carousel autoplay and loading image issue - reactjs

Question

Hi i've found this https://github.com/Learus/react-material-ui-carousel to use it on my website. But i've encountered 2 problems:
In order to set the autoPlay state, i have to change it to class which leads to unable to use const classes = useStyles() so does anyone know what should i do?
I have 3 jpg photos saved in the img folder under the same directory and i have no idea why the photos cant be loaded in my localhost.
Here is my code:
import React from 'react';
import { createMuiTheme } from '#material-ui/core';
import { ThemeProvider } from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import Tooltip from '#material-ui/core/Tooltip';
import Carousel from 'react-material-ui-carousel';
import CarouselSlide from 'react-material-ui-carousel';
import Card from '#material-ui/core/Card';
import CardMedia from '#material-ui/core/CardMedia';
import CardContent from '#material-ui/core/CardContent';
const theme = createMuiTheme ({
palette: {
primary:{
main:'#3c52b2'
}
}
})
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
Button: {
"&:hover": {
backgroundColor: "#fff !important"
}
},
title: {
flexGrow: 1,
},
}));
export default function UMainPage (){
const pictures = [
{image:'./2.jpg', title:'Iu 1'},
{image:'./3.jpg', title:'Iu 2'},
{image:'./4.jpg', title:'Iu 3'}
];
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" className={classes.title}>
清动订馆平台
</Typography>
<Button color="inherit">首页</Button>
<Button color="inherit">历史订单</Button>
<Tooltip disableFocusListener disableTouchListener title="登录账号">
<Button color="inherit">未登录</Button>
</Tooltip>
</Toolbar>
</AppBar>
<Carousel>
{pictures.map(({image, title}) => (
<CarouselSlide key={image}>
<Card>
<CardMedia
image={image}
title={title}
style={{
height: 0,
paddingTop: '25%',
}}
/>
<CardContent>
<Typography>{title}</Typography>
</CardContent>
</Card>
</CarouselSlide>
))}
</Carousel>
</ThemeProvider>
);
}

Answer 1

In order to set autoPlay you should pass it to Carousel like this:
<Carousel autoPlay>
...
</Carousel>
If you want to have ability to change it you should keep in state:
const [autoPlay, setAutoPlay] = useState(true);
You should import your images first and then keep them in the pictures array:
import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
...
const pictures = [
{ image: image2, title: "Iu 1" },
{ image: image3, title: "Iu 2" },
{ image: image4, title: "Iu 3" },
];