Invalid use of Hooks Error

[ShubhamChaudharyy]

When i Run this bunch of code or Specifically when i export the verticals tabs component it throws error (Invalid use of hooks)
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

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

return (
<div
role="tabpanel"
hidden={value !== index}
id={vertical-tabpanel-${index}}
aria-labelledby={vertical-tab-${index}}
{...other}
>
{value === index && (

{children}

)}

);
}

TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};

function a11yProps(index) {
return {
id: vertical-tab-${index},
'aria-controls': vertical-tabpanel-${index},
};
}

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
display: 'flex',
height: 224,
},
tabs: {
borderRight: 1px solid ${theme.palette.divider},
},
}));

export default function VerticalTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);

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

return (

<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
<Tab label="Item Four" {...a11yProps(3)} />
<Tab label="Item Five" {...a11yProps(4)} />
<Tab label="Item Six" {...a11yProps(5)} />
<Tab label="Item Seven" {...a11yProps(6)} />


Item One


Item Two


Item Three


Item Four


Item Five


Item Six


Item Seven

);
}

[cseas]

Please mention if you've tried the fixes in the documentation:
https://reactjs.org/warnings/invalid-hook-call-warning.html

[ShubhamChaudharyy]

Already tried and Also i think it is a bug in react v17.0.1 because i ran same bunch of code in older React package and node modules V16.13.1 and the code is working fine. I Think it is a bug in V17.0.1 when we try to load higher order components( loading a custom or readymade component in Export ready component)

[thoughtlessmind]

Hey @ShubhamChaudharyy
I tried running the code you've provided for the issue. First of all, try to provide proper code snippet, provided snippets have some code issues and errors.
I've tried running your code after fixing some issues and I don't found any issues. It is working properly. If you're trying to create a vertical tab component then use the orientation prop, read here.
Here is the working code snippet:-

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";

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

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`vertical-tabpanel-${index}`}
      aria-labelledby={`vertical-tab-${index}`}
      {...other}
    >
      {value === index && children}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired
};

function a11yProps(index) {
  return {
    id: `vertical-tab-${index}`,
    "aria-controls": `vertical-tabpanel-${index}`
  };
}

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
    display: "flex",
    height: 224
  },
  tabs: {
    borderRight: `1px solid ${theme.palette.divider}`
  }
}));

export default function VerticalTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

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

  return (
    <div>
      <Tabs orientation="vertical" onChange={handleChange} value={value}>
        <Tab label="Item One" {...a11yProps(0)} />
        <Tab label="Item Two" {...a11yProps(1)} />
        <Tab label="Item Three" {...a11yProps(2)} />
        <Tab label="Item Four" {...a11yProps(3)} />
        <Tab label="Item Five" {...a11yProps(4)} />
        <Tab label="Item Six" {...a11yProps(5)} />
        <Tab label="Item Seven" {...a11yProps(6)} />
      </Tabs>
      {["one", "two", "three", "four", "five", "six", "seven"].map(
        (item, index) => (
          <TabPanel value={value} index={index}>
            {`Item ${item}`}
          </TabPanel>
        )
      )}
    </div>
  );
}

Check the working demo: -