Para la página de inicio de mi aplicación, represento varios componentes con el componente VirtualizeSwipeableViews. Al cambiar una pestaña, el componente se animará en la ventana y luego se volverá a cargar muy rápidamente. Tengo la sensación de que la recarga se debe al estado del índice de la pestaña seleccionada que se actualiza dos veces. ¿Cómo puedo solucionar esto para obtener transiciones suaves entre los componentes?

Aquí está la demostración para un caso de uso similar: https://codesandbox.io/s/00r0yr6vjn?file=/demo.js

Mi código:

 const App = (props) => { const { match, history } = props; const { params } = match; const { page } = params; const tabNameToIndex = { 0: "kaupapa", 1: "artists", 2: "tickets", 4: "info", 5: "participate", 6: "gallery", }; const indexToTabName = { kaupapa: 0, artists: 1, tickets: 2, info: 4, participate: 5, gallery: 6, }; const [selectedTab, setSelectedTab] = useState(indexToTabName[page]); const handleChange = (event, newIndex) => { history.push(`/home/${tabNameToIndex[newIndex]}`); setSelectedTab(newIndex); }; const slideRenderer = (params) => { const { index } = params; let component; switch (mod(index, 7)) { case 0: component = <Kaupapa />; break; case 1: component = <Artists />; break; case 2: component = <Tickets />; break; case 4: component = <Info />; break; case 5: component = <Participate />; break; case 6: component = <Gallery />; break; default: break; } return <>{component}</>; }; const handleChangeIndex = (index) => { setSelectedTab(index); } return ( <> <Tabs value={selectedTab} onChange={handleChange} > <Tab label="Kaupapa" /> <Tab label="Artists" /> <Tab label="Tickets" /> <Tab icon={ <img src={logo} ></img> } disabled /> <Tab label="Info" /> <Tab label="Participate" /> <Tab label="Gallery" /> </Tabs> <VirtualizeSwipeableViews index={selectedTab} onChangeIndex={handleChangeIndex} slideRenderer={slideRenderer} /> </> ); }; export default App; ```