Компонент не отображается в многоэтапной форме React Router

поэтому я использую реагирующий маршрутизатор и formik для создания многоступенчатой ​​формы. Я основывал свое приложение на бронирование на этой статье.

https://codedaily.io/tutorials/50/Create-a-Form-Wizard-with-Data-Loss-Prevention-using-Formik-and-React-Router

Я получил базовую маршрутизацию. Я просто пытаюсь перенаправить пользователя в раздел 1 моей формы бронирования, когда он попадает на URL-адрес / make-a-booking. это довольно просто, но я не уверен, что я что-то упускаю. Итак, проблема в том, что ContactSection ничего не отображает. Можно ли с помощью формика создать многоступенчатую форму?

Вот ссылка на репозиторий githib. https://github.com/umxr/booking-form

Вот код для App.js

import React, { Component } from 'react';
import FormWizard from './components/FormWizard';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';

class App extends Component {
  render() {
    return (
      <div className = "App">
        <Router>
            <Switch>
                <Route exact path = "/" component = {Home} />
                <Route exact path = "/make-a-booking" component = {FormWizard} />
                <Route exact path = "/about" component = {About} />
                <Route exact path = "/contact" component = {Contact} />
            </Switch>
        </Router>
      </div>
    );
  }
}

export default App;

Вот код для FormWizard.js

import React, { Component } from 'react';
import Layout from './Layout';
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import { Formik, Form } from "formik";
import ContactSection from './sections/ContactSection';
import PhoneSection from './sections/PhoneSection';

class FormWizard extends Component {
    render() {
        return (
            <Layout>
                <Switch>
                    <Redirect from = "/make-a-booking" to = "/make-a-booking/contact" />
                    <Route exact path = "/make-a-booking/contact" component = {ContactSection} />
                    <Route exact path = "/make-a-booking/phone" component = {PhoneSection} />
                </Switch>
            </Layout>
        )
    }
}

export default FormWizard;

в настоящее время contactSection и PhoneSection просто отображают строку типа «это раздел телефона» и т. д.