React Materail TabPanel - reactjs

Question

I'm new to React and made the code below
Where I'm trying to insert a TabPanel but it's getting an error
Uncaught TypeError: No TabContext provided at TabPanel (TabPanel.js:26)
at renderWithHooks (react-dom.development.js:14803)
How do I adjust this error?
import React, {useState, useEffect} from "react";
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
import MenuItem from '#material-ui/core/MenuItem';
import Fetch from "../../../services/Fetch";
import InputDatePicker from "../../../components/InputDatepicker";
import CurrencyTextField from '#unicef/material-ui-currency-textfield';
import bridge from "./bridge";
import Tabs from '#material-ui/core/Tabs';
import Tab from '#material-ui/core/Tab';
import TabPanel from '#material-ui/lab/TabPanel';
export default (props)=>{
const [state, setState] = useState(bridge.getForm(props.idUsidUser));
const [value, setValue] = useState(0);
useEffect(()=>{
setTimeout(()=>{
var elements = document.querySelectorAll("div[min='0']");
elements.forEach((element) => {
if(element.children.length > 0){
element.children[0].min = 0;
}
});
}, 300);
}, []);
bridge.setForm = setState;
const closeModal = (event) =>{
document.querySelector("#form").removeAttribute("style");
document.querySelector("html").removeAttribute("style");
document.querySelector(".modal-overlay").removeAttribute("style");
}
const onInputChange = (event) => {
setState({
...state,
[event.target.name]: event.target.value
});
}
const handleChange = (event, newValue) => {
setValue(newValue);
};
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
return (
<form onSubmit={onSubmit}>
<h3 className="featured">Create</h3>
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Tab 1" {...a11yProps(0)} />
<Tab label="Tab 2" {...a11yProps(1)} />
<Tab label="Tab 3" {...a11yProps(2)} />
<Tab label="Tab 4" {...a11yProps(3)} />
<Tab label="Tab 5" {...a11yProps(4)} />
</Tabs>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
</form>
);
}
I don't know what I did wrong for React to acknowledge the error.
What to do in this case? Well, I followed the basic principles that I studied in the framework documentation

Answer 1

Comments were a little confusing for me, so here's a clear answer for others who run into this:
The error comes when using the Material UI Basic Tabs demo. They use a 'TabPanel' component in this, but as defined by their function as shown in the full code of their example (see snippet below)
The other type of TabPanel is part of the MUI labs and is imported from MUI directly:
import TabPanel from '#mui/lab/TabPanel';
But that won't work with the code in their demo example.
Demo link: https://mui.com/material-ui/react-tabs/
So if you are using the demo on the page quoted, you also need to use the same function they use:
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box sx={{ p: 3 }}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}