I know it's too late but I am also looking for the same thing. I found "react-material-ui-carousel" very helpful and it works as expected. Hope this help.

import { Grid2, Paper, Button } from "@mui/material";
import Carousel from "react-material-ui-carousel";
import banner_1 from "../assets/banner_1.jpg";
import banner_2 from "../assets/banner_2.jpg";
import banner_3 from "../assets/banner_3.jpg";

const MyCarousel = () => {
  const items = [
    {
      name: "Random Name #1",
      description: "Probably the most random thing you have ever seen!",
      bannerImage: banner_1,
    },
    {
      name: "Random Name #2",
      description: "Hello World!",
      bannerImage: banner_2,
    },
    {
      name: "Random Name #3",
      description: "Another banner here!",
      bannerImage: banner_3,
    },
  ];

  return (
    <Carousel autoPlay interval={2000} animation="slide" indicators={false}>
      {items.map((item, index) => (
        <Paper key={index} style={{ textAlign: "center", padding: "10px" }}>
          <img
            src={item.bannerImage}
            alt={item.name}
            style={{ width: "100%", height: "auto" }}
          />
        </Paper>
      ))}
    </Carousel>
  );
};

const Home = () => {
  return (
    <Grid2 container spacing={2} justifyContent="center">
      <Grid2 size={12}>
          <MyCarousel />
      </Grid2>
    </Grid2>
  );
};


export default Home;