MUI: The `value` provided to the Tabs component is invalid. The Tab with this `value` ("0") is not part of the document layout

I found a solution, maybe not the best one, but it works

I understood the problem is that the Tabs component try to load its children Tab before they exist. So the idea is to introduce a delay in their generation using setTimeout:

import * as React from 'react';
import Box from '@mui/material/Box';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import Typography from '@mui/material/Typography';

function TabPanel(props) {
    const { children, value, index} = props;

    return (
        value === index && (
                <Typography>{children}</Typography>
        )
    );
}

export default function BasicTabs() {
    const [value, setValue] = React.useState(0);
    const [activateTab, setActivateTab] = React.useState(false);

    setTimeout(()=>{
        setActivateTab(true)
    },100)

    const tabsArr=[
        {
            label:"Item One",
            key: `simple-tab-0`,
        },
        {
            label:"Item Two",
            key: `simple-tab-1`,
        }
    ]

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    return (
        <Box sx={{ width: '100%' }}>
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                <Tabs value = {value} onChange = {handleChange}>
                    {activateTab && (
                            tabsArr.map((item)=>(
                                <Tab {...item} />
                            ))
                        )
                    }
                </Tabs>
            </Box>
            <TabPanel value={value} index={0}>Item One</TabPanel>
            <TabPanel value={value} index={1}>Item Two</TabPanel>
        </Box>
    );
}

If it don't work, you can try to increase the delay

Use useState(0) instead of useState('0') that fixed it for me