Dynamic page being empty when accessing directly or after refresh

Whenever I try to access /contact/product it works perfectly fine. But when I try to access it directly or I refresh whilst I’m on the page the page just becomes empty.

My routing:

<Router>
      <ScrollToTop />
      <Nav></Nav>
      <Routes>
        <Route path="/" exact element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/contact/:product" element={<Contact />} />
        <Route path="/privacy-policy" element={<Privacy />} />
        <Route path="/cookie-policy" element={<Cookies />} />
        <Route path="/pricing" element={<Pricing />} />
        <Route path="/*" element={<NotFound />} />
      </Routes>
      <Footer></Footer>
    </Router>

The contact component:

import React from "react";
import ContactForm from "../components/Contact/ContactForm";
import "../style/Contact/Contact.scss"
import "../style/Contact/Breakpoints.scss"
import useDocumentTitle from "../lib/useDocumentTitle";

function Contact() {
  useDocumentTitle("Contact")
  return (
    <div id="contact">
      <div className="container">
        <div className="row">
          <div className="contact--left left">
            <h1 className="contact--title title">
              Let&#x2019;s build something great together
            </h1>
          </div>
          <div className="contact--right right">
            <ContactForm />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Contact;

I’ve tried making /product go to another component but it still doesnt work.