makeStyles() throwing error using Typescript

Good Evening,
I am trying to convert my JS react application to React Typescript, but I am running into a very long error. I am not sure how to get past this. Below is the code in the file its referencing and how I am implementing it, as well as the error.

I am new to Typescript and I have tried other solutions from other Stackoverflow posts, but none to see to have worked. I was originally using creatStyles(), but that does not seem to work either.

If I changed the implementation of useStyles to

//const useStyles = makeStyles<DefaultTheme>((theme: Theme) => {createStyles(appStyle)});

Then the error I get tells me that theme:Theme => void

Any guidance is appreciated

TypeScript error in /Users/augustshah/Documents/Coding-Tools-new/Projects/Payment-Dashboard/src/layouts/Admin.tsx(43,30):
Argument of type '(theme: Theme) => { wrapper: { position: string; top: string; height: string; }; mainPanel: { maxHeight: string; width: string; overflowScrolling: string; transition: string; overflow: string; position: string; float: string; }; content: { ...; }; container: { ...; }; map: { ...; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "content" | "map" | "wrapper" | "mainPanel" | "container">'.
  Type '(theme: Theme) => { wrapper: { position: string; top: string; height: string; }; mainPanel: { maxHeight: string; width: string; overflowScrolling: string; transition: string; overflow: string; position: string; float: string; }; content: { ...; }; container: { ...; }; map: { ...; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "content" | "map" | "wrapper" | "mainPanel" | "container">'.
    Call signature return types '{ wrapper: { position: string; top: string; height: string; }; mainPanel: { maxHeight: string; width: string; overflowScrolling: string; transition: string; overflow: string; position: string; float: string; }; content: { ...; }; container: { ...; }; map: { ...; }; }' and 'StyleRules<{}, "content" | "map" | "wrapper" | "mainPanel" | "container">' are incompatible.
      The types of 'wrapper' are incompatible between these types.
        Type '{ position: string; top: string; height: string; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
          Type '{ position: string; top: string; height: string; }' is not assignable to type 'CreateCSSProperties<{}>'.
            Types of property 'position' are incompatible.
              Type 'string' is not assignable to type 'PositionProperty | PropsFunc<{}, PositionProperty>'.  TS2345

    41 |   </Switch>
    42 | );
  > 43 | const useStyles = makeStyles((theme: Theme) => (appStyle(theme)));
       |                              ^
    44 | 
    45 | 
    46 |  //const useStyles = makeStyles<DefaultTheme>((theme: Theme) => {createStyles(appStyle)});

Admin.tsx

const useStyles = makeStyles((theme: Theme) => (appStyle(theme)));



export default function Admin({ ...rest }) {
  // styles
  //const classes = useStyles();
  const theme = useTheme<Theme>();
  const classes = useStyles(theme);

 
  return (
    <div className={classes.wrapper}>
      {handleSideBarLogin() ?
     null :  <Sidebar
     routes={routes}
     logoText={"02DesignStudio"}
     logo={logo}
     image={image}
     handleDrawerToggle={handleDrawerToggle}
     open={mobileOpen}
     color={color}
     {...rest}
    />
      }
    </div>
  );
}

AdminStyle.tsx

import {
  drawerWidth,
  transition,
  container
} from "../../material-dashboard-react";

const appStyle = theme => ({
  wrapper: {
    position: "relative",
    top: "0",
    height: "100vh"
  },
  mainPanel: {
    [theme.breakpoints.up("md")]: {
      width: `calc(100% - ${drawerWidth}px)`
    },
    overflow: "auto",
    position: "relative",
    float: "right",
    ...transition,
    maxHeight: "100%",
    width: "100%",
    overflowScrolling: "touch"
  },
  content: {
    marginTop: "70px",
    padding: "30px 15px",
    minHeight: "calc(100vh - 123px)"
  },
  container,
  map: {
    marginTop: "70px"
  }
});

export default appStyle;