React Bootstrap Link and params

Question

New to React,

I'm trying to pass an ID from one component to another into an API and then display the data from the API based on that particular ID, using react Link bootstrap but I'm not getting any data. Any help will be appreciated.

I'm able to get all the data from the API in read.js but I can not get data of a particular object based on the ID after clicking View Link

I have tried using const {id} = useParams() then pass the id to the API but nothing working

App.js

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./App.css";
import Read from "./components/read";
import User from "./components/User";
import Header from "./components/navBar";

import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <Router>
      <Header />
      <div className="main">
        <Switch>
          <Route exact path="/" component={Read} />

          <Route path="/Crud/:id" component={User} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

read.js;
import React, { useState, useEffect } from "react";
import Table from "react-bootstrap/Table";
import { Button } from "react-bootstrap";
import axios from "axios";
import { Link } from "react-router-dom";

export default function Read() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get("https://6239f849bbe20c3f66cd0857.mockapi.io/Crud")
      .then((response) => {
        setUsers(response.data);
        console.log(users);
      });
  }, [users]);

  return (
    <div>
      <Table striped bordered hover>
        <thead class="thead-dark">
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>View</th>
            <th>Edit</th>
            <th>Delete</th>
          </tr>
        </thead>

        <tbody>
          {users.map((response) => {
            return (
              <tr key={response.id}>
                <td>{response.id}</td>
                <td>{response.firstName}</td>
                <td>{response.lastName}</td>

                <td>
                  <Link to={`/Crud/${response.id}`} variant="info">
                    view{" "}
                  </Link>
                </td>

                <td>
                  <Button variant="primary">edit </Button>
                </td>
                <td>
                  <Button variant="danger">delete </Button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
}

User.js;

import React, { useState, useEffect } from "react";
import Table from "react-bootstrap/Table";
import { Button } from "react-bootstrap";
import axios from "axios";
import { Link } from "react-router-dom";
import { useParams } from "react-router-dom";

export default function User() {
  const [user, setUser] = useState();

  useEffect(() => {
    const { id } = useParams();
    axios
      .get(`https://6239f849bbe20c3f66cd0857.mockapi.io/Crud/${id}`)
      .then((response) => {
        setUser(response.data);
      });
  }, []);

  return <div>{user && <h1>{user.name}</h1>}</div>;
}