[React] Redirectコンポーネントを使用すると「You should not use <Redirect> outside a <Router>」といったエラーが表示される

前提・実現したいこと

Reactを使用してログイン/ログアウト機能を含めた開発を行っております。
ログアウトリンクをクリックするとログイン画面へ遷移させたいと思っております。

発生している問題・エラーメッセージ

ログアウトリンクをクリックすると以下のエラーが発生しています。
(materialuiのコンポーネントAppBarにログアウトリンクを作成しています。)
エラー内容的に、RedirectがRouterの外で行われているという指摘だと思いますが、RedirectはRouterの中で行っているつもりです。

原因を調べていますが経験が浅く、解決できておらずお力をお借りしたいと思っております。
その他情報が必要であればご指摘いただければと思います。

エラーメッセージ
Error: Invariant failed: You should not use <Redirect> outside a <Router>

### 該当のソースコード

```ここに言語名を入力
"react": "17.0.1",
"react-router-dom": "5.2.0",
ソースコード

■index.js
render(<React.Fragment>{routes}</React.Fragment>, document.getElementById('app'));

■routes.js
import { BrowserRouter as Router,Route,Switch } from 'react-router-dom';
export default (
<MuiThemeProvider muiTheme={ThemeDefault}>
<Router>
<Switch>
<Route exact path="/login" component={LoginPage}/>
<Route path="/" component={App}/>
</Switch>
</Router>
</MuiThemeProvider>
);

■App.js

import AppBar from 'material-ui/AppBar';

class App extends React.Component {

render(){
return(
/<Redirect to="/login" />/ ログイン画面遷移OK

    <AppBar
          style={styles.header}
          iconElementLeft={
              <IconButton style={style.menuButton} onClick={this.handleChangeRequestNavDrawer.bind(this)}>
                <Menu color={white} />
              </IconButton>
          }
          iconElementRight={
            <div style={style.iconsRightContainer}>
              <IconMenu color={white}
                        iconButtonElement={
                          <IconButton><MoreVertIcon color={white}/></IconButton>
                        }
                        targetOrigin={{horizontal: 'right', vertical: 'top'}}
                        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
              >
                <MenuItem primaryText="ﾛｸﾞｱｳﾄ" containerElement={ <Redirect to="/login" />}/>  //エラー発生
              </IconMenu>
            </div>
          }
          
        />
);

}
}