Recibo el error Uncaught TypeError: Cannot read properties of undefined (reading 'up') mientras ejecuto el siguiente código: No pude compilar mi reacción js

En 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();

En Theme.js Ahora en el theme.js usando material ui Alguien que me ayude.

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

exportar const tema = createTheme({

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

})

Luego en 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', } }))