ThemeProvider does not apply theme to child components from material ui library

I am using Typescript, React. Material-UI (now MUI) and Webpack.

I am trying to apply a theme using material-ui's ThemeProvider but it only seems to apply that theme to components that are not from the material-ui library.

import React from 'react'
import { ThemeProvider, CssBaseline } from '@material-ui/core'
import { createTheme } from '@material-ui/core/styles'

import Router from './components/Router'
import NavBar from './components/NavBar'

import Toolbar from '@mui/material/Toolbar'
import Container from '@mui/material/Container'

export function App(): JSX.Element {
  const theme = createTheme({
    palette: {
      type: 'dark',
      primary: {
        main: '#ffeb3b',
      },
      secondary: {
        main: '#795548',
      },
    },
  })

  return (
    <ThemeProvider theme={theme}>
      <NavBar />
      <Toolbar />
      <Container>
        <Router />
      </Container>
      <CssBaseline />
    </ThemeProvider>
  )
}

The I can see darkmode being toggled so long as the backdrop for the app is not a MUI paper element. Also my AppBar contained within my NavBar component does not change color when I change the palette main colors.

Putting the theme into a different file does not help. And I have already run Yarn upgrade so everything should be up to date. What is going on?