react-material-ui-carousel Warning: Prop ‘className did not match” error

I am trying to use react-material-ui-carousel package and I am running into this error:

Warning: Prop className did not match. Server: “MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-9sd0w4-MuiButtonBase-root-MuiIconButton-root” Client: “MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-ktslay-MuiButtonBase-root-MuiIconButton-root”

I am not really sure how to resolve this

page.js

"use client";

import { Box } from "@mui/material";
import React from "react";
import ImageCarousel from "./ImageCarousel";

export default function Home() {
  return (
    <Box sx={{ width: "100vw" }}>
      <Box
        sx={{
          justifyContent: "center",
          textAlign: "center",
          mt: "20px",
        }}
      >
        <ImageCarousel />
      </Box>
    </Box>
  );
}

ImageCarousel.js

import React from 'react';
import Carousel from 'react-material-ui-carousel'
import { Paper, Button } from '@mui/material'

function ImageCarousel(props)
{
    var items = [
        {
            name: "Random Name #1",
            description: "Probably the most random thing you have ever seen!"
        },
        {
            name: "Random Name #2",
            description: "Hello World!"
        }
    ]

    return (
        <Carousel>
            {
                items.map( (item, i) => <Item key={i} item={item} /> )
            }
        </Carousel>
    )
}

function Item(props)
{
    return (
        <Paper>
            <h2>{props.item.name}</h2>
            <p>{props.item.description}</p>

            <Button className="CheckButton">
                Check it out!
            </Button>
        </Paper>
    )
}

export default ImageCarousel;

Sorry if this is a stupid question. I am new to web dev and React

I’ve tried modifying my layout.js and creating createEmotionCache.js, however, I don’t really understand what I was doing and nothing fixed the issue.