Почему ничего не выводится в теге <Container> material-ui/core

import React, { useState, useEffect } from "react";
import Container from '@material-ui/core/Container';
 
const SomeName = () => {
    return (
        <Container>
                <h1>Some Text</h1>
        </Container> 
    );
};
 
export default SomeName;

import Container from '@material-ui/core/Container';

import SomeName from './components/SomeName';
function App() {
  return (
    <div className="App">
      <Router>
        <NavBarMenu />
        <Routes>
          <Route exact path='/somepath' element={<SomeName/>} />
        </Routes>
      </Router>
    </div>
  );
}

{
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@fontsource/roboto": "^4.5.8",
    "@material-ui/core": "^5.0.0-beta.5",
    "@mui/icons-material": "^5.11.11",
    "add": "^2.0.6",
    "cors": "^2.8.5",
    "react-router": "^6.9.0"
  }
}

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import SomeName from "./components/SomeName";
 
const NavBarMenu = () => (
  <div>
    <Link to="somepath">goto SomeName</Link>
  </div>
);
 
export default function App() {
  return (
    <div className="App">
      <Router>
        <NavBarMenu />
        <Routes>
          <Route path="/somepath" element={<SomeName />} />
        </Routes>
      </Router>
    </div>
  );
}

import { Container } from "@mui/system";
 
const SomeName = () => {
  return (
    <Container>
      <h1>Some Text</h1>
    </Container>
  );
};
 
export default SomeName;

    "@emotion/react": "11.10.6",
    "@emotion/styled": "11.10.6",
    "@fontsource/roboto": "4.5.8",
    "@mui/icons-material": "5.11.11",
    "@mui/system": "5.11.13", <===========
    "@mui/types": "7.2.3",
    "@types/react-router-dom": "5.3.3",
    "loader-utils": "3.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-router-dom": "6.9.0",
    "react-scripts": "5.0.1"