ThemeProvider custom theme injection in Material UI v5 is not working

Question

I have been stuck on this for quite a while. I want to make my navigation bar as a primary color according to my custom theme, but ThemeProvider for some reason is not overriding the default theme not working on any other components too, the only part that is working is just dark mode.

Thanks for any help.

This is my App.js

import { Container, CssBaseline } from "@mui/material";
import Navbar from "./components/Navbar";
import StickyHeadTable from "./components/StickyHeaderTable";
import { ThemeProvider, createTheme } from '@mui/material/styles';

const tema = createTheme({
  palette: {
    mode: "dark",
    primary: {
      main: "#00897b",
    },
    secondary: {
      main: "#ef6c00",
    },
    text: {
      primary: "#d5d5d5",
    },
    divider: "#616161",
    background: {
      paper: "#201f1f",
      default: "#000000",
    },
  }
});


function App() {
  return (
    
    <div className="App">
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div style={{height: '100vh'}}>
          <Container maxWidth={false} sx={{backgroundColor: 'background.paper', height: '100%'}}>
            <Container width='lg'>
            <Navbar sx={{color: 'primary'}}/>
            </Container>
              <div>
                <h2 align = "center">Candidates</h2>
              </div>
            <Container>
              <StickyHeadTable/>
            </Container>
          </Container>
        </div>
      </ThemeProvider>
    </div>
    );
}

export default App;

And this is my navigation bar Navbar.js:

import * as React from 'react';
import MenuIcon from '@mui/icons-material/Menu';
import { CssBaseline, AppBar, Box, Toolbar, IconButton, Typography, Menu, Container, Avatar, Button, Tooltip, MenuItem } from '@mui/material';
import { HowToVote } from '@mui/icons-material';
import { ThemeProvider, createTheme } from '@mui/material/styles';


const pages = ['Candidates', 'Vote', 'Voting results'];
const settings = ['Profile', 'Logout'];

function ResponsiveAppBar() {
  const [anchorElNav, setAnchorElNav] = React.useState(null);
  const [anchorElUser, setAnchorElUser] = React.useState(null);

  const handleOpenNavMenu = (event) => {
    setAnchorElNav(event.currentTarget);
  };
  const handleOpenUserMenu = (event) => {
    setAnchorElUser(event.currentTarget);
  };

  const handleCloseNavMenu = () => {
    setAnchorElNav(null);
  };

  const handleCloseUserMenu = () => {
    setAnchorElUser(null);
  };

  const tema = createTheme({
    palette: {
      mode: "dark",
      primary: {
        main: "#00897b",
      },
      secondary: {
        main: "#ef6c00",
      },
      text: {
        primary: "#d5d5d5",
      },
      divider: "#616161",
      background: {
        paper: "#201f1f",
        default: "#000000",
      },
    }
  });

  return (
    <AppBar position="static">
      <Container maxWidth="xl">
        <Toolbar color='primary'sx={{alignItems: 'center'}}>
          <Box>
            <HowToVote sx=
            {{fontSize: "48px",
            justifyContent: "space-around",
            alignItems: "flex-start",
            marginLeft: '-20px',
        }} 
            />
          </Box>
          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none'} }}>
            <IconButton
              size="large"
              aria-label="account of current user"
              aria-controls="menu-appbar"
              aria-haspopup="true"
              onClick={handleOpenNavMenu}
              color="default"
            >
              <MenuIcon />
            </IconButton>
            <Menu
              id="menu-appbar"
              anchorEl={anchorElNav}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
              }}
              keepMounted
              transformOrigin={{
                vertical: 'top',
                horizontal: 'left',
              }}
              open={Boolean(anchorElNav)}
              onClose={handleCloseNavMenu}
              sx={{
                display: { xs: 'block', md: 'none'},
              }}
            >
              {pages.map((page) => (
                <MenuItem key={page} onClick={handleCloseNavMenu}>
                  <Typography textAlign="center">{page}</Typography>
                </MenuItem>
              ))}
            </Menu>
          </Box>
          <Typography
            variant="h5"
            noWrap
            component="a"
            href=""
            sx={{
              mr: 2,
              display: { xs: 'flex', md: 'none' },
              flexGrow: 1,
              fontFamily: 'monospace',
              fontWeight: 700,
              letterSpacing: '.3rem',
              color: 'inherit',
              textDecoration: 'none',
              alignItems: "center"
            }}
          >
            VOTING APP
          </Typography>

          <Box sx={{ flexGrow: '1' , justifyContent:'center', display: { xs: 'none', md: 'flex' } }}>
            {pages.map((page) => (
              <Button
              alignItems='center'
                key={page}
                onClick={handleCloseNavMenu}
                sx={{my: 2, color: 'white', display: 'block' }}
              >
                {page}
              </Button>
            ))}
          </Box>

          <Box sx={{ flexGrow: 0 }}>
            <Tooltip title="Open settings">
              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                <Avatar alt="User" src="/static/images/avatar/2.jpg" />
              </IconButton>
            </Tooltip>
            <Menu
              sx={{ mt: '45px' }}
              id="menu-appbar"
              anchorEl={anchorElUser}
              anchorOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              keepMounted
              transformOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              open={Boolean(anchorElUser)}
              onClose={handleCloseUserMenu}
            >
              {settings.map((setting) => (
                <MenuItem key={setting} onClick={handleCloseUserMenu}>
                  <Typography textAlign="center">{setting}</Typography>
                </MenuItem>
              ))}
            </Menu>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
}
export default ResponsiveAppBar;

I have tried reinstalling packages thinking there could be something wrong with dependencies, I have also created a new project, but the problem still persisted. I have CssBaseline imported as well.