Is ther anyway to set the Material UI Tabs unselected as default? - material-ui

Question

I'm using the material UI Tabs in my project cause I thought it fits my web logic.
However, I need to set it as unselected as default. What I did is set the default state value as 'undefinded'. It acturly works as the 1st item of the Tabs won't be selected as default, but I also getting the following error from the console:
Material-UI: The value provided to the Tabs component is invalid.
None of the Tabs' children match with undefined.
You can provide one of the following values: 0, 1, 2.
Anyone knows how to accomplish my target and avoid the error message?
export default function SimpleTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(); //I set the default value to undefinded to make the Tabs unselected as default but also getting the error message.
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</div>
);
}

Answer 1

From the docs > Props > value:
The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false.
To accomplish this, set the initial value to false:
const [value, setValue] = React.useState(false);