title: React Materail TabPanel
body: <p>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?</p>
  <pre><code>import React, {useState, useEffect} from &quot;react&quot;;
  import TextField from '@material-ui/core/TextField';
  import Button from '@material-ui/core/Button';
  import MenuItem from '@material-ui/core/MenuItem';
  import Fetch from &quot;../../../services/Fetch&quot;;
  import InputDatePicker from &quot;../../../components/InputDatepicker&quot;;
  import CurrencyTextField from '@unicef/material-ui-currency-textfield';
  import bridge from &quot;./bridge&quot;;
  import Tabs from '@material-ui/core/Tabs';
  import Tab from '@material-ui/core/Tab';
  import TabPanel from '@material-ui/lab/TabPanel';
  
  export default (props)=&gt;{
  
  const [state, setState] = useState(bridge.getForm(props.idUsidUser));
  const [value, setValue] = useState(0);
  
  useEffect(()=&gt;{
      setTimeout(()=&gt;{
          var elements = document.querySelectorAll(&quot;div[min='0']&quot;);
          elements.forEach((element) =&gt; {
              if(element.children.length &gt; 0){
                  element.children[0].min = 0;
              }
          });
      }, 300);
  }, []);
  
  bridge.setForm = setState;
  
  const closeModal = (event) =&gt;{
      document.querySelector(&quot;#form&quot;).removeAttribute(&quot;style&quot;);
      document.querySelector(&quot;html&quot;).removeAttribute(&quot;style&quot;);
      document.querySelector(&quot;.modal-overlay&quot;).removeAttribute(&quot;style&quot;);
  }
  
  const onInputChange = (event) =&gt; {
      setState({
          ...state,
          [event.target.name]: event.target.value
      });
  }
  
  const handleChange = (event, newValue) =&gt; {
      setValue(newValue);
  };
  
  function a11yProps(index) {
      return {
        id: `simple-tab-${index}`,
        'aria-controls': `simple-tabpanel-${index}`,
      };
    }
  
  return (
      &lt;form onSubmit={onSubmit}&gt;
          &lt;h3 className=&quot;featured&quot;&gt;Create&lt;/h3&gt;
          &lt;Tabs value={value} onChange={handleChange} aria-label=&quot;simple tabs example&quot;&gt;
            &lt;Tab label=&quot;Tab 1&quot; {...a11yProps(0)} /&gt;
              &lt;Tab label=&quot;Tab 2&quot; {...a11yProps(1)} /&gt;
              &lt;Tab label=&quot;Tab 3&quot; {...a11yProps(2)} /&gt;
              &lt;Tab label=&quot;Tab 4&quot; {...a11yProps(3)} /&gt;
              &lt;Tab label=&quot;Tab 5&quot; {...a11yProps(4)} /&gt;
          &lt;/Tabs&gt;
          &lt;TabPanel value={value} index={0}&gt;
              Item One
          &lt;/TabPanel&gt;
      &lt;/form&gt;
  );
  }
  </code></pre>
  <p>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</p>