I am Getting the error Uncaught TypeError: Cannot read properties of undefined (reading 'up') while running the below code: I could not compile my react js

At Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import { ThemeProvider } from '@mui/material';

import { theme } from './Components/Theme';


const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>

  </React.StrictMode>

);

reportWebVitals();

At Theme.js Now at the theme.js using material ui Anyone help me.

import { createTheme } from "@mui/material";

export const theme = createTheme({

palette: {
    primary: {
        main: "#000",
        light: "#543"
    },
    secondary: {
        main:"#arbs3",
    },
    otherCo: {
        main:"#999"
    }
}

})

Then At NavBar.jsx

const SearchIcon = styled(Box)(({theme})=>({

    display: 'none',
    padding: '1rem',
    gap: '12px',
    alignItems: 'center',
    //small or greater so We used up
    [theme.breakpoints.up('sm')]: {
        display: 'flex',
    }
}))