Страница ошибки в ReactJS отображается под каждым отдельным компонентом страницы

Мне удалось создать для себя сайт с помощью ReactJS. Все работает нормально, за исключением того, что последнее добавление страницы с ошибкой отображается под каждой другой отображаемой страницей. Т.е. если я перейду в / localhost: 3000 / blog, где отображаются все элементы блога, под этим и выше нижним колонтитулом также отображается компонент Error404. Любой совет, чтобы я мог расширить свои пока ограниченные знания? Компонент приложения следующий:

const App = () => {
  return (
    <Router>
      <Switch>

        <Route exact path = "/">
          <Home />
        </Route>
      
          <div className = "appWrapper">
            <NavBar />


              <Route exact path = "/blog">
                  <Blog />
              </Route>

              <Route exact path = "/article/:id">
                        <Article />
                    </Route>

              <Route exact path = "/contact">
                <ContactForm />
              </Route>
              
              <Route path = "*">
                <Error404 />
              </Route>
              
            <Footer />
          </div>

      </Switch>
    </Router>
    
  )
}