Axios can't get the obejct Id react

Question

I have a component DetailPage.js, that lists items thought axios get, that I wish returns that specific object user clicks on in order to get more details. But it returns an empty object. ID is undefined. console How link id of object to specific url?

Here is my App.js file

import React, { Component } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import CreateUser from "./components/CreateUser";
import DetailPage from "./components/DetailPage";
import EditUser from "./components/EditUser";
import LandingPage from "./components/LandingPage";
import Header from "./components/Header";

export default class App extends Component {
  render() {
    return (
      <Router>
        <div className='container'>
        <Header />
            <Routes>
            <Route path="/add" element={<CreateUser/>}/>
            <Route path="/user/:id" element={<DetailPage/>}/>
            <Route path="/" element={<LandingPage />} />
            </Routes>
        </div>
      </Router>
    )
  }
}

this is DetailPage.js

import React, { Component } from 'react';
import axios from "axios";

export default class DetailPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
        users: [],
    };
}


  componentDidMount() {
    const { id } = this.props.match.params
    axios.get(`http://localhost:5000/detail/${id}`)
         .then(res => {
             this.setState({ users: res.data.users });
         })
         .catch(error => {
             console.log(error)
         });
   
   }



  render() {
    const { name, email, phone, loc, date } = this.state.users;
    return (
      <div>
        <h4>{name}</h4>
        <hr />
        <dl className="row">
          <dt className="col-sm-2">Email</dt>
          <dd className="col-sm-10">{email}</dd>
          <dt className="col-sm-2">Phone</dt>
          <dd className="col-sm-10">{phone}</dd>
          <dt className="col-sm-2">Location</dt>
          <dd className="col-sm-10">{loc}</dd>
          <dt className="col-sm-2">Date</dt>
          <dd className="col-sm-10">{date}</dd>
        </dl>
      </div>
    );
  }
}