Can not pass props to component

Question

I am creating an embedded react application into a wordpress site. I have fetched the data to show a list of posts however I can not pass the props to the Single post page. I can only think that it has something to do with the BrowserRouter and react-router-dom. I've searched Stack Overflow and can not find anything that is recent, the things I have tried have all failed. There maybe something very simple that I am missing.

Home.js

import React from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import "../sass/home.scss";

class Home extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      posts: [],
      error: "",
    };
  }

  componentDidMount() {
    const wordPressSiteUrl = "http://localhost/wordpress";
    this.setState({ loading: true }, () => {
      axios
        .get(`${wordPressSiteUrl}/wp-json/acf/v3/property`)
        .then((res) => {
          this.setState({ loading: false, posts: res.data });
          console.log(res.data);
        })
        .catch((error) =>
          this.setState({ loading: false, error: error.response.data })
        );
    });
  }

  render() {
    const { posts } = this.state;

    return (
      <div>
        {posts.length ? (
          <div className="post-container">
            {posts.map((post) => (
              <div key={post.id} className="card">
                <div className="card-header">
                  <Link to={`/property/${post.id}`}>
                    {post.acf.property_title}
                  </Link>
                </div>
                <div className="card-img-top">
                  <img src={post.acf.featured_image.url} alt="" />
                  {console.log(post.id)}
                </div>
              </div>
            ))}
          </div>
        ) : (
          ""
        )}
      </div>
    );
  }
}

export default Home;

As it stands, I am getting undefined in the console log.

SinglePost.js;

import React from "react";
import axios from "axios";

class SinglePost extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      post: {},
      error: "",
    };
  }

  componentDidMount() {
    const wordPressSiteUrl = "http://localhost/wordpress";
    console.warn(this.props.id);
    this.setState({ loading: true }, () => {
      axios
        .get(`${wordPressSiteUrl}/wp-json/acf/v3/property/${this.props.id}`)

        .then((res) => {
          this.setState({ loading: false, post: res.data });
        })
        .catch((error) =>
          this.setState({ loading: false, error: error.response.data })
        );
      // console.log(this.props.id);
    });
  }

  render() {
    const { post, error, loading } = this.state;

    return (
      <div>
        {Object.keys(post).length ? (
          <div className="post-container">
            <div key={post.id} className="card">
              <div className="card-header">{post.acf.property_title}</div>
              <div className="card-img-top">
                <img src={post.acf.featured_image.url} alt="" />
                {console.log(post.id)}
              </div>
            </div>
          </div>
        ) : (
          ""
        )}
      </div>
    );
  }
}

export default SinglePost;

App.js

import React from "react";
import Home from "./components/Home";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import SinglePost from "./components/SinglePost";
import Navbar from "./components/Navbar";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/property/:id" element={<SinglePost />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;