¡Intentaré explicar mi problema lo más claro posible!

Estoy desarrollando un sitio web usando React y Material-UI. En una de mis páginas, obtuve una superficie (aquí un componente de MUI). En este documento, quiero mostrar algunos componentes que he desarrollado, pero solo quiero mostrar uno a la vez.

Implementé un componente de MUI para usar el número de página como referencia para qué componente mostrar.

Imagina algo como esto:

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

De este esqueleto, me gustaría mostrar OWNCOMPONENT_1 si el número de página es 1, OWNCOMPONENT_2 si el número de página es 2, etc.

No encontré ningún ejemplo del componente Pagination MUI que muestre componentes, sino solo una lista. Intenté usar una función de cambio que devuelve el componente necesario, pero el resultado visual no funciona. También probé con una solución de enrutamiento, pero no domino esto lo suficiente como para hacer algo que funcione.

Espero que todo lo que dije sea comprensible y estoy abierto a cualquier solución, incluso si tengo que cambiar la forma de representar lo que quiero.

Todavía soy un novato usando React y JS también, así que probablemente necesite explicaciones :)