Uso Next.js y Material UI. Necesito renderizar un elemento en otro lugar, debido a la biblioteca Swiper que uso.

Para este propósito, estoy usando el componente <Portal> de Material UI y aquí está mi código:

 import { useRef } from 'react' import Portal from '@mui/material/Portal'; //more code here const container = useRef(null); //more code here <div ref={container}></div> //more code here <Swiper spaceBetween={20} slidesPerView={1} > <Portal container={container.current}> <SwiperButton></SwiperButton> </Portal> { ads.map(ad => <SwiperSlide key={ad.imageUrl}> <div>{ad.title}</div> </SwiperSlide> )} </Swiper>

Este código funciona bien para la primera carga de mi página web. Pero tan pronto como actualizo la página web, desaparece y desaparece por completo y no hay ningún error en la consola.

Y no importa lo que haga, no volverá. Ctrl+F5 no funciona y detener, destruir y recrear mi contenedor no funciona.

La única forma de hacer que funcione es comentar esa parte del código, cargar la página y descomentarla nuevamente.

¿Por qué es así y cómo puedo solucionar este problema?