Реагировать на простой маршрутизатор не принятый путь

Question

Это мой простой код:

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

import Order from "./components/Order";

const rootNode = document.getElementById('application');

if (rootNode) {
    ReactDOM.render(
        <Router>
            <Switch>
                <Route path="/my/orders/">
                    <Order/>
                </Route>
                <Route path="*">
                    <div />
                </Route>
            </Switch>
        </Router>,
        rootNode
    );
}

Компонент "Мой заказ":

import * as React from "react";
import { useForm } from "react-hook-form";

type FormData = {
    firstName: string;
    lastName: string;
};

export default function Order() {
    const { register, setValue, handleSubmit, errors } = useForm<FormData>();
    const onSubmit = handleSubmit(({ firstName, lastName }) => {
        console.log(firstName, lastName);
    });

    console.log("Order");

    return (
        <form onSubmit={onSubmit}>
            <div>
                <label>First Name</label>
                <input name="firstName" ref={register} />
            </div>
            <div>
                <label>Last Name</label>
                <input name="lastName" ref={register} />
            </div>
            <div>
                <button
                    type="button"
                    onClick={() => {
                        setValue("lastName", '');
                        setValue("firstName", '');
                    }}
                >
                    SetValue
                </button>
            </div>
        </form>
    );
}

Я проверил URL: "/ my / orders / add", но он будет генерировать только пустой DIV кроме моего компонента Order.