Styled component testing for react using 'react-test-renderer' and react testing-library

Question

I am trying to have snapshot for this component but I get error

import React from 'react';
// material
import { styled } from '@mui/material/styles';
import { Box, Paper, Typography, Container, Grid } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';
// components
import Page from '../components/Page';
import Breadcrumbs from '../components/Breadcrumbs';
import Footer from '../components/guests/Footer';

const RootStyle = styled(Page)(() => ({
    display: 'block',
}));

function StaticContent({ data }) {
    return (
        <RootStyle title={typeof (data) !== 'undefined' ? data.title : ''}>
            {typeof (data) == 'undefined' ? (
                <Container maxWidth='xl' >
                    <Skeleton animation="wave" variant="rectangular" sx={{
                        p: 2,
                        minHeight: 400,
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'flex-end',
                        mb: 2
                    }} />
                    <Skeleton animation="wave" variant="rectangular" sx={{
                        minHeight: 300,
                        mb: 2,
                        px: 5,
                        py: 3
                    }} />
                    <Skeleton animation="wave" variant="rectangular" sx={{
                        minHeight: 200,
                        mb: 2,
                        px: 5,
                        py: 3
                    }} />
                </Container>
            ) : (

                <Container maxWidth='false' sx={{ paddingLeft: '0px!important', paddingRight: '0px!important' }} >
                    <Paper elevation={3} sx={{
                        backgroundImage: 'linear-gradient(90.02deg, rgba(19, 30, 87, 0.6) 0.02%, rgba(19, 30, 87, 0) 100%),url(' + data.image + ')',
                        minHeight: 400,
                        backgroundRepeat: 'round',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'flex-end',
                        borderRadius: '0px',
                        color: '#ffffff',


                    }}>
                        <Container maxWidth='xl'>
                            <Typography variant={'h2'} sx={{ pb: 10, pl: 9 }}>
                                {data.bannerTitle}
                            </Typography>
                        </Container>
                    </Paper>

                    <Container maxWidth='xl'>
                        <Paper elevation={3} sx={{
                            px: 9,
                            borderRadius: '0px',
                            paddingTop: '20px',
                            paddingBottom: '45px',
                            boxShadow: 'none'
                        }}>
                            <Breadcrumbs breadcrumbsTitle={data.title}/>

                            <Typography sx={{ pt: 3 }} variant={'h2'}>
                                {data.title}
                            </Typography>
                            <Grid >
                                <Box dangerouslySetInnerHTML={{ __html: data.content }}></Box>
                            </Grid>
                        </Paper>
                    </Container>
                    

                    {/*<div dangerouslySetInnerHTML={{__html: data.content}} />*/}
                </Container>
            )}
            <Footer/>
        </RootStyle>
    );
}

export default StaticContent;

My test file is code where I want to create a snapshot.

import { render, fireEvent, screen ,cleanup } from "@testing-library/react";
import StaticContent from '../components/StaticContent';
import renderer from 'react-test-renderer';

//test block
const mockRequest = () => {
    return {
        bannerTitle: 'Benefits',
        image: 'https:/google/makkah.jpg',
        title: 'Benefits',
        content: 'content'
    };
};
afterEach(cleanup)
jest.mock('react-i18next', () => ({
    useTranslation: () => ({t: key => key})
}));
test("Create a snapshot for Static Content",()=>{
    const staticContent= renderer.create(<StaticContent data={mockRequest}/>).toJSON();
    expect(staticContent).toMatchSnapshot();

});

did not understand why getting this error . Also googled a lot for the solution but nothing handy to solve this .

I know and component need to be taken care separately. But if I need to have a snapshot for the total Static component can I do that using Jest ?