How to completely disable a TabPanel component (and grey out the text) and default to the 2nd tab in the index using React

Question

Currently I am facing a requirement to disable the first tab in a TabPanel index and automatically default to the 2nd tab in the index (due to the components of the first tab not being ready yet so automatically it should be disabled from onclick and not be swipeable). I want to default to the Forecast tab, while completely disabling the first TabPanel component (label = Accuracy) and it's child components. I am not sure how to do this being new to react and this being some inherited code. Below is the snapshot of the code, the UI where it currently defaults to the Accuracy tab, and a snapshot of what it should be (with AccuracyTab completely disabled and greyed out/no onclick/onchange events):

import React from 'react';
import { useDispatch, useSelector } from "react-redux";
import PropTypes from 'prop-types';
import SwipeableViews from 'react-swipeable-views';
import { makeStyles, withStyles} from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
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';
import AccuracyTab from "../AccuracyTab/AccuracyTab";
import ForecastTab from "../ForecastTab/ForecastTab";
import ConfigurationHeader from "../ConfigurationHeader/ConfigurationHeader";
import { Toolbar} from "@material-ui/core";
import styles from "./mastHead.scss";


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

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

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

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

const AntTabs = withStyles({
  root: {
    minHeight: 'fit-content',
  },
  indicator: {
    backgroundColor: 'transparent',
  },
})(Tabs);

const AntTab = withStyles((theme) => ({
  root: {
    textTransform: 'none',
    minWidth: 30,
    fontWeight: theme.typography.fontWeightRegular,
    marginRight: 50,
    height: 25,
    minHeight: 'fit-content',
    fontSize: 20,
    padding: 0,
    color: '#ffffff',
    opacity: .5,
    fontFamily: [
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      'Geneva',
    ].join(','),
    '&:hover': {
      color: '#ffffff',
      opacity: .7,
    },
    '&$selected': {
      color: '#ffffff',
      fontWeight: theme.typography.fontWeightMedium,
      opacity: 1,
    },
    '&:focus': {
      color: '#ffffff',
      opacity: 1
    },
  },
  selected: {},
}))((props) => <Tab disableRipple {...props} />);

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.background.paper,
  },
}));

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

  // React.useEffect(() => {
  //   setSelectedNodeTypes(selectedNodeTypes);
  // }, [lastUpdateDate]);

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

  const handleTabChangeIndex = (index) => {
    setValue(index);
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar className={styles.appbar} style={{paddingLeft:'0px'}}>
          <div className={styles.menu}>
          <div className={styles.topMenu}>
            <div className={styles.tabs}>
              <AntTabs value={value} onChange={handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth" aria-label="full width tabs example">
                <AntTab label="Accuracy" {...a11yProps(0)} />
                <AntTab label="Forecast" {...a11yProps(1)} />
              </AntTabs>
            </div>
          </div>
          <ConfigurationHeader/>
        </div>
        </Toolbar>
      </AppBar>
      <SwipeableViews
        containerStyle={{
          transition: 'transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1) 0s'
        }}
        index={value}
        onChangeIndex={handleTabChangeIndex}
      >
        <TabPanel value={value} index={0} >
          <AccuracyTab/>
        </TabPanel>
        <TabPanel value={value} index={1} className={styles.viewBackground}>
          <ForecastTab/>
        </TabPanel>
      </SwipeableViews>
    </div>
  );
}

Current snapshot:

Snapshot of what it should be (disabled from clicking/swiping to accuracy, greyed out, etc.):

Answer 1

It appears that using the disabled prop for the Tab component (in this case AntTab) and setting the indicatorColor and textColor = "primary" helped to disabled the Accuracy Tab, along with greying it out using primary color (default from material UI for Tab component). I also changed useState to 1 as the default, which automatically defaults to the 2nd value in the tab index. Now I have it defaulting to the 2nd tab, and completely disabling the 1st tab. See the code snippets below (based off the code in question) that I changed to accomplish this:

Instead of:

const [value, setValue] = React.useState(0);

Set useState to 1 (value in the index as a default):

const [value, setValue] = React.useState(1);

For the Tab component (AntTabs in this code), move the indicatorColor and textColor props from the parent AntTabs to both the AntTab child components and set the Accuracy AntTab to disabled:

<AntTabs value={value} onChange={handleTabChange} variant="fullWidth" aria-label="full width tabs example">
  <AntTab label="Accuracy" {...a11yProps(0)} indicatorColor="primary" textColor="primary" disabled/>
  <AntTab label="Forecast" {...a11yProps(1)} indicatorColor="primary" textColor="primary"/>
</AntTabs>