TypeError: theme is undefined - When trying to render Material UI component

I am having trouble rendering my react component since I separated my jss file and changed it from makeStyles to withStyles to avoid a hook problem.

The problem is an error message in my jss styling file as a couple of the methods have a ‘theme’ in the parenthesis for the styling to work off.

How do I go about changing this so that it renders correctly?

accessControl.component.js

import {connect, useSelector} from "react-redux";
import DataTable from "./userListTable.component";
import {Paper} from "@material-ui/core";

function AdminAccessControl(props) {

    const { children, value, index, ...other } = props;

    // select user object from redux
    const user = useSelector(state => state.user);

    // select school object from redux
    const school = useSelector(state => state.diveSchool);

    const classes = useStyles();

    const [role, setRole] = useState({
        userRole: "",
    });

    const handleChange = (property) => (e) => {
        setRole({
            // override the changed property and keep the rest
            ...role,
            [property]: e.target.value,
        });
    }

    return (

        <div className={classes.root}>
            <StyledTabs
                value={value}
                onChange={handleChange}
                indicatorColor="primary"
                textColor="primary"
                aria-label="styled tabs example"
                centered>
                    <StyledTab label="User Access Control" />
                    {/*<DataTable />*/}
                    <StyledTab label="Scuba School Access Control" />
                    {/*<DataTable />*/}
            </StyledTabs>
            <Typography className={classes.padding} />
        </div>
    );
}

function mapStateToProps(state){
    const { user } = state.auth;
    const { school } = state.diveSchool;
    return {
        user,
        school,
    };
}

export default compose(
    connect(
        mapStateToProps,
    ),
    withStyles(useStyles)
)(AdminAccessControl);

myJss-style.js

export const useStyles = (theme) => ({

    root: {
        flexGrow: 1,
    },
    padding: {
        padding: theme.spacing(3),
    },
    demo1: {
        backgroundColor: theme.palette.background.paper,
    },
    demo2: {
        backgroundColor: '#2e1534',
    },
});

export const StyledTabs = () => ({
    indicator: {
        display: 'flex',
        justifyContent: 'center',
        backgroundColor: 'transparent',
        '& > span': {
            maxWidth: 40,
            width: '100%',
            backgroundColor: '#635ee7',
        },
    },
})((props) => <StyledTabs {...props} TabIndicatorProps={{ children: <span /> }} />);

export const StyledTab = (theme) => ({
    root: {
        textTransform: 'none',
        color: '#fff',
        fontWeight: theme.typography.fontWeightRegular,
        fontSize: theme.typography.pxToRem(15),
        marginRight: theme.spacing(1),
        '&:focus': {
            opacity: 1,
        },
    },
})((props) => <StyledTab disableRipple {...props} />);