How to fix error with Material-ui Tabs, none of tabs children match '2'?

I am starting to build a Header component for my react app using Material-ui. While building the Toolbar I added a Tabs component and inside added three Tab components. One for Home, contact-us, and to logout. I realize though that whenever I press any other tab other than logout everything is fine. However, as soon as I press logout it throws the following error:

index.js:1 Material-UI: The value provided to the Tabs component is invalid.
None of the Tabs' children match with `2`.
You can provide one of the following values: 0, 1. 

When reading the documentation and looking at the error more closely I realized it has something to do with the value state and setValue property. So I am unsure if my problem is that I have to set a variable to hold all my info and then I just make a reference to the variable in my Tab component. Regardless, my goal is to just get the logout tab working in any way that does not produce this error message.

import React, { useState, Fragment } from 'react';
import Toolbar from '@material-ui/core/Toolbar';
import { 
    AppBar, 
    Typography, 
    Tabs, 
    Tab, 
    SwipeableDrawer,
    IconButton,
    Button
} from '@material-ui/core';
import { Link } from 'react-router-dom';
import MenuIcon from "@material-ui/icons/Menu";
import { makeStyles } from '@material-ui/core/styles';
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { useTheme } from "@material-ui/core/styles";
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { logout } from '../../../actions/auth';



const useStyles = makeStyles(theme => ({
    toolbarMargin: {
        ...theme.mixins.toolbar,
    },
      player: {
          marginBottom: "2em"
      },
      tabContainer: {
          marginLeft: "auto",
          
      },
      tab: {
          textTransform: "none",
          fontWeight: 400,
          fontSize: "1.3rem",
          color: "#000000"
       
      },
      bar: {
          backgroundColor: "#e5e5e5"
          
      },
      name: {
          color: "#000000"
      },
      drawerIcon: {
        height: "40px",
        width: "40px"
      },
      drawerIconContainer: {
          marginLeft: "auto",
          "&:hover": {
              backgroundColor: "transparent"
          }
      }
      
}));

const Header = ({ auth: { isAuthenticated, loading }, logout }) => {



    const classes = useStyles();
    const theme = useTheme();
    const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
    const matches = useMediaQuery(theme.breakpoints.down('sm'));
    const [value, setValue] = useState(0);
    const [openDrawer, setOpenDrawer] = useState(false);

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



    const authLinks =(
        <Tabs value={value} onChange={handleChange} className={classes.tabContainer} indicatorColor="primary">
            <Tab className={classes.tab} component={Link} to="/dashboard" label="Home" disableRipple />
            <Tab className={classes.tab} component={Link} to="/contact-us" label="Contact Us" disableRipple />
            <Tab className={classes.tab} onClick={logout} label="Logout" disableRipple />
        </Tabs>
    );


    const guestLinks = (
        
        <Tabs value={value} onChange={handleChange} className={classes.tabContainer} indicatorColor="primary">
            <Tab component={Link} to="/register" label="Register"/>
            <Tab component={Link} to="/login" label="Login"/>
        </Tabs>
        
    );


    

    // const drawer = (
    //     <React.Fragment>
    //         <SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} open={openDrawer} onClose={()=> setOpenDrawer(false)} onOpen={()=> setOpenDrawer(true)}>
    //             Contact Us
    //         </SwipeableDrawer>

    //         <IconButton className={classes.drawerIconContainer} onClick={() => setOpenDrawer(!openDrawer)} disableRipple>
    //             <MenuIcon className={classes.drawerIcon} />
    //         </IconButton>
    //     </React.Fragment>
    // );


    return (
        <React.Fragment>
            <AppBar className={classes.bar}>
                <Toolbar> 
                    <Typography variant="h5" className={classes.name}>SilverStone</Typography>
                    { !loading && (<Fragment>{ isAuthenticated ? authLinks : guestLinks } </Fragment>) }
                </Toolbar>
            </AppBar>
            <div className={classes.toolbarMargin} />
        </React.Fragment>
    );
}

Header.propTypes = {
    logout: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
    auth: state.auth
})

export default connect(mapStateToProps, { logout })(Header);