MUI conflict with LangaugeProvider

i’m trying to use MUI React designs for my project, but seems like whenever i try using it I get this error Cannot read properties of null (reading 'useContext'). I ran out of ideas how to fix it, even using MUI throws this error, in my opinion it conflicts with LanguageProvider. All routes in App.js are wrapped around the LanguageProvider. The component code i tried to use MUI looks like this.

import { Link } from 'react-router-dom';
import { AppBar, Toolbar, Button, Typography, Box, Menu, MenuItem } from '@mui/material';
import LanguageContext from '../LanguageContext';
import Login from './login';
import Register from './register';

const Navbar = ({ isLoggedIn, handleLogout, user, setIsLoggedIn, setUser }) => {
 const [showProfile, setShowProfile] = useState(false);
 const [showLogin, setShowLogin] = useState(false);
 const [showRegister, setShowRegister] = useState(false);
 const { language, switchLanguage } = useContext(LanguageContext);

 const toggleProfile = () => setShowProfile(!showProfile);
 
 const openLogin = () => {
   setShowLogin(true);
   setShowRegister(false);
 };
 
 const openRegister = () => {
   setShowRegister(true);
   setShowLogin(false);
 };

 return (
   <AppBar position="static" sx={{ backgroundColor: 'rgba(164, 136, 115, 0.9)', fontFamily: 'Kanit' }}>
     <Toolbar>
       <Typography variant="h6" component={Link} to="/" sx={{ flexGrow: 1, textDecoration: 'none', color: 'inherit' }}>
         eValgykla
       </Typography>
       
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         {isLoggedIn && !user?.isCashier && (
           <>
             <Button color="inherit" component={Link} to="/cart">{language.Cart}</Button>
             <Button color="inherit" onClick={() => switchLanguage('en')}>
               <img src="https://www.countryflags.com/wp-content/uploads/united-kingdom-flag-png-large.png" alt='English' width={25} height={15} />
             </Button>
             <Button color="inherit" onClick={() => switchLanguage('lt')}>
               <img src="https://cdn.countryflags.com/thumbs/lithuania/flag-400.png" alt='Lithuanian' width={25} height={15} />
             </Button>
             {user && user.isAdmin && (
               <Button color="inherit" component={Link} to="/admin">{language.AdminDashboard}</Button>
             )}
             <Button color="inherit" onClick={toggleProfile}>
               {language.Welcome}, {user?.Name || ''}
             </Button>
             {/* Profile Menu */}
             <Menu open={showProfile} onClose={toggleProfile}>
               <MenuItem component={Link} to="/account">{language.Account}</MenuItem>
               <MenuItem component={Link} to="/payment-history">{language.PaymentHistory}</MenuItem>
               <MenuItem component={Link} to="/your-children">{language.YourChildren}</MenuItem>
               <MenuItem component={Link} to="/help">{language.Help}</MenuItem>
               <MenuItem component={Link} to="/faq">{language.FAQ}</MenuItem>
               <MenuItem onClick={handleLogout}>{language.logout}</MenuItem>
             </Menu>
           </>
         )}

         {isLoggedIn && user?.isCashier && (
           <Button color="inherit" onClick={handleLogout}>{language.logout}</Button>
         )}

         {!isLoggedIn && (
           <>
             <Button color="inherit" onClick={openLogin}>{language.login}</Button>
             <Button color="inherit" onClick={openRegister}>{language.Register}</Button>
             {showLogin && <Login setIsLoggedIn={setIsLoggedIn} setUser={setUser} />}
             {showRegister && <Register onRegisterSuccess={() => { setShowLogin(true); setShowRegister(false); }} />}
           </>
         )}
       </Box>
     </Toolbar>
   </AppBar>
 );
};

export default Navbar;