React functional App being called again on tab change

Question

I'm using a functional app style and a tabbed user interface. The part of the code relevant to the tabbed interface is as follows:

function App() {
  const [currentTab, setCurrentTab] = useState(0);
// and much other state as well

. . .

  const tabChange = (event, newTab) => {
    setCurrentTab(newTab);
    if (newTab == 1) {
      updatePlaylists(false);  //get data to display in the tab
    } else if (newTab == 2) {
      updatePlaylists(true);   //get data to display in the tab
    }
  };

  return (
            <Tabs
              value={currentTab}
              onChange={tabChange}
              aria-label="tabs"
              sx={{ marginLeft: "1rem" }}
            >
              <Tab
                sx={{ fontFamily: "Barlow, sans-serif" }}
                label="Events"
                {...a11yProps(0)}
              />
              <Tab
                sx={{ fontFamily: "Barlow, sans-serif" }}
                label="Playlists"
                {...a11yProps(1)}
              />
              <Tab
                sx={{ fontFamily: "Barlow, sans-serif" }}
                label="Channels"
                {...a11yProps(2)}
              />
            </Tabs>
  );

export default App;

Now here's my problem: when the user switches from tab 0 to any of the rest, things are fine. But when the user switches to tab 0 by clicking on it, the App function itself is called afresh. This "takes it from the top" and wipes out all my state, reinitializing it!

What would cause this to happen, and how can I prevent it?