Theme not being provided to sub-components using makeStyles MUI v5

Question

I'm migrating my app to v5 while still using makeStyles for styling the app but I am get the following error when the app tries to render (it compiles fine).

One thing I noticed is that this error only occurs in subcomponents. The error does not occur in the Login component for example which is defined in the initial component tree. It only occurs in components that are not defined in the initial component tree. Do I have to pass the theme to these components somehow?

I believe I've followed everything in the migration guide.

Here is my root App.js code:

import React from "react";
import axios from "axios";

import theme from "./theme";
import {
  ThemeProvider,
  StyledEngineProvider,
} from "@mui/material/styles";

import AppRoutes from "./AppRoutes";


axios.defaults.baseURL = deployed_api;

function App() {
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        // Component Tree
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

export default App;

And here is my theme.js code:

import { adaptV4Theme, createTheme } from '@mui/material/styles';

const theme = createTheme(adaptV4Theme({
  palette: {
    primary: {
      dark: "#181818",
      main: "#212121",
      light: "#3D3D3D",
    },
    secondary: {
      main: "#89CFF0",
    },
    text: {
      primary: "#FFFFFF",
      secondary: "#AAAAAA",
      disabled: "#AAAAAA"
    },
    action: {
      disabled: "#AAAAAA",
    },
  },
  typography: {
    fontFamily: ['"Ubuntu"', "sans-serif"].join(","),
  },
}));

export default theme;

makeStyles code:

import React from "react";
import { NavLink } from "react-router-dom";

import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles((theme) => ({
  root: {
    height: "5rem",
    background: theme.palette.primary.main,
    display: "flex",
    justifyContent: "space-between",
  },
}));

function DeskTopNav({ user }) { const classes = useStyles(theme); return ( //content ) }