Using react swipeable views virtualize to render components gives them jittery, double loading animation

Question

For my app's home page I am rendering multiple components with the VirtualizeSwipeableViews component. On changing a tab, the component will animate into the window and then very quickly reload again. I have a feeling the reload is due to the state of the selectedTab index updating twice. How can I fix this to get smooth transitions between components?

Here's the demo for a similar use case: https://codesandbox.io/s/00r0yr6vjn?file=/demo.js

My code:

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; ```