React dom Routerが上手く表示されない

前提・実現したいこと

https://takoyan33.github.io/todo_react_app/

にて、TodoListをReactで作っています。

githubのソースコード。
https://github.com/takoyan33/todo_react_app

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

React dom Routerを使い、Aboutページに移動させたいと考えており、
ABoutページを表示させることができました。

https://takoyan33.github.io/about

しかし何故かApp.jsでしか表示させていないTOdoの入力欄や未完了のTODOや完了のTODOが表示されています。

該当のソースコード

JavaScript
1//About.js
2export const About = () => {
3
4return (
5  <>
6<h1>About</h1>
7
8<p>aaaaaaaaa</p>
9</>
10);
11
12}
13

JavaScript
1//App.js
2// import Button from '@mui/material/Button';
3import React, { useState } from 'react';
4import "./App.css";
5import "./index.css";
6import  InputTodo from "./components/InputTodo";
7import { IncompleteTodos } from "./components/IncompleteTodos";
8import{ CompleteTodos}  from "./components/CompleteTodos";
9import AppBar from '@mui/material/AppBar';
10import Box from '@mui/material/Box';
11import Toolbar from '@mui/material/Toolbar';
12import Typography from '@mui/material/Typography';
13import Button from '@mui/material/Button';
14import IconButton from '@mui/material/IconButton';
15import MenuIcon from '@mui/icons-material/Menu';
16import {
17  BrowserRouter,
18  Switch,
19  Route,
20  Link
21} from "react-router-dom";
22import { About } from "./About.js"
23
24
25
26
27export const App = () => {
28  <head>
29<meta name="viewport" content="initial-scale=1, width=device-width" />
30  </head>
31      const [todoText, setTodoText] = useState("");
32      const [incompleteTodos, setIncompleteTodos] = useState([""]);
33      const [completeTodos, setCompleteTodos] = useState([""]);
34    
35      const onChangeTodoText = (event) => setTodoText(event.target.value);
36    
37      const onClickAdd = () => {
38        if (todoText === "") return;
39        const newTodos = [...incompleteTodos, todoText];
40        setIncompleteTodos(newTodos);
41        setTodoText("");
42      };
43    
44    
45      const onClickDelete = (index)=> {
46    const newTodos =[...incompleteTodos];
47    newTodos.splice(index, 1);
48    setIncompleteTodos(newTodos);
49      };
50    
51      const onClickComplete = (index) => {
52        const newIncompleteTodos =[...incompleteTodos];
53        newIncompleteTodos.splice(index, 1);
54    
55        const newCompleteTodos = [...completeTodos, incompleteTodos[index]];
56        setIncompleteTodos(newIncompleteTodos);
57        setCompleteTodos(newCompleteTodos);
58      }
59    
60      const onClickBack = (index) => {
61        const newCompleteTodos =[...completeTodos];
62        newCompleteTodos.splice(index, 1);
63    
64        const newIncompleteTodos = [...incompleteTodos, completeTodos[index]];
65        setCompleteTodos(newCompleteTodos);
66        setIncompleteTodos(newIncompleteTodos);
67      }
68
69
70      // const [value, setValue] = React.useState(0);
71    
72      return (
73        <>
74 <BrowserRouter>
75    <Box sx={{ flexGrow: 1 }}>
76      <AppBar position="static">
77        <Toolbar>
78          <IconButton
79            size="large"
80            edge="start"
81            color="inherit"
82            aria-label="menu"
83            sx={{ mr: 2 }}
84          >
85            <MenuIcon />
86          </IconButton>
87          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
88          <Link to="/">TodoList</Link>
89          </Typography>
90          <Button color="inherit">
91          <Link to="/about">About</Link>
92            </Button>
93        </Toolbar>
94      </AppBar>
95
96      <Switch>
97          <Route exact path="/about">
98            <About />
99          </Route>
100          {/* <Route exact path="/">
101            <App />
102          </Route> */}
103      </Switch> 
104    </Box> 
105</BrowserRouter>
106
107
108    {/* <Box sx={{ flexGrow: 1 }}>
109      <AppBar position="static">
110        <Toolbar>
111          <IconButton
112            size="large"
113            edge="start"
114            color="inherit"
115            aria-label="menu"
116            sx={{ mr: 2 }}
117          >
118            <MenuIcon />
119          </IconButton>
120          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
121         TodoList
122          </Typography>
123          <Button color="inherit">
124          About
125            </Button>
126        </Toolbar>
127      </AppBar>
128    </Box>  */}
129
130
131    <div className="">
132      <InputTodo todoText={todoText} onChange={onChangeTodoText} onClick={onClickAdd} disabled={incompleteTodos.length >= 5 } />
133      {incompleteTodos.length >= 5 && <p  className="text-red-400">登録できるtodoは5個までです。 </p> }
134      <IncompleteTodos todos={incompleteTodos} onClickComplete={onClickComplete}  onClickDelete={onClickDelete}  />
135    
136
137      <CompleteTodos todos={completeTodos} onClickBack={onClickBack}  />
138    </div>
139        </>
140      );};
141
142export default App;
143
144</>
145);}
146

試したこと

検索してみたが、上手く見つかりませんでした。

補足情報（FW/ツールのバージョンなど）

"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@mui/icons-material": "^5.2.5",
"@mui/material": "^5.2.5",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"gh-pages": "^3.2.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"
}