I'll try to explain my problem as much clear as possible !

I'm developing a website using React and Material-UI. In one of my page, i got a surface (here a component from MUI). In this Paper i want to display some component i've developed but i want to display only one at a time.

I have implemented a component from MUI to use the page number as a reference for which component to display.

Imagine something like this:

<Paper>
  <Grid container>
     <Grid item>
         <OWN COMPONENTS>
     </Grid>
  </Grid>
  <Grid item>
     <Stack>
        <Pagination count={nbPage} color='primary' onChange={handleChange} />
     </Stack>
  </Grid>
</Paper>

From this skeleton, i would like to display OWNCOMPONENT_1 if the pageNumber is 1, OWNCOMPONENT_2 if pageNumber is 2, etc.

I didn't find any example from Pagination MUI component displaying components but only list. I've tried to use a switch function that return the component needed but the visual result was broken. I also tried with a routing solution but i don't master this enough to do something that works.

I expect all i said is understandable and i'm open for any solution even if i have to change the way to render what i want.

I still be a novice using React and JS aswell, so i'll probably need explainations :)