Can not pass props to component - reactjs

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;