How do I route to individual pages using index number instead of id of the object?

I am quite new to useParams and ExpressJS and am trying to use it to display a detailed user profile after clicking on a list of profiles tagged with their profile number. The user profiles are an object stored in an array. I am trying to get the link in the browser to display it as "https://localhost/3000/profile/1" where 1 is the index number instead of the profile number like "https://localhost/3000/profile/A123".

Data is being stored in profile.json: [{"PROFILE_NUMBER": "A123", "NAME": "X", "AGE" : "21", "HOBBY" : "RUN"} , .....]

In the utils.js

const getProfiles = async () => {
  // Retrieve sightings.json file contents as string
  const profiles = await readFile("./profiles.json", "utf8");
  // Return sightings as an object
  return JSON.parse(profiles);
};


module.exports = {
  getProfiles
}

Here is my index.js in my backend folder

const express = require("express");
const { getProfile } = require("./utils.js");
var cors = require("cors");

require("dotenv").config();

const PORT = process.env.PORT;
const app = express();
app.use(cors());

app.get("/profiles", async (req, res) => {
  const profiles = await getProfile();
  res.json(profiles);
});

app.get("/profiles/:profileIndex", async (req, res) => {
  const profiles = await getProfile();
  res.json(profiles[req.params.profileIndex]);
});

app.listen(PORT, () => {
  console.log(`Express app listening on port ${PORT}!`);
});

On the other hand, for my frontend. This is my App.js where the data is being called from the backend:

import React from "react";
import "./App.css";
import Card from "./Card";
import Single from "./Single";
import { Routes, Route } from "react-router-dom";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      profiles: [],
    };
  }

  componentDidMount() {
    fetch("http://localhost:3000/profiles")
      .then((response) => response.json())
      .then((data) => {
        this.setState({ profiles: data });
      });
  }

  render() {
    return (
      <div className="App">
        <Routes>
          <Route
            exact
            path="/profile"
            element={<Card profiles={this.state.profiles} />}
          ></Route>
          <Route
            path="/profiles/:profileIndex"
            element={<Single profiles={this.state.profiles} />}
          ></Route>
        </Routes>
      </div>
    );
  }
}

export default App;

This is my Card.js which is the list of user profiles displayed.

import React from "react";
import "./App.css";
import { Link } from "react-router-dom";

const Card = ({ profiles }) => {
  return (
    <div className="App">
      {profiles.map((profile) => (
        <div className="container">
          <Link
            style={{ display: "block", margin: "1rem 0" }}
            to={`/profiles/${profile.PROFILE_NUMBER}`}
            key={profile.PROFILE_NUMBER}
          >
            <div>
              {profile.PROFILE_NUMBER}
              <br />
              {profile.NAME}
              <br />
            </div>
          </Link>
        </div>
      ))}
    </div>
  );
};

export default Card;

Lastly, this is the Single.js where it display individual profile

import React from "react";
import { useParams } from "react-router-dom";
import "./App.css";

const Single = ({ profiles }) => {
  let params = useParams();
 

  var newArray = profiles.filter(function (el) {
    return el.PROFILE_NUMBER === params.profileIndex;
  });

  return (
    <div className="App">
      {console.log(newArray)}
      {`Report Number: ${newArray[0].PROFILE_NUMBER}`}
      <br />
      {`County: ${newArray[0].NAME}`}
      <br />
      {`Year: ${newArray[0].AGE}`}
      <br />
      {`Description: ${newArray[0].HOBBY}`}
    </div>
  );
};

export default Single;

How do I get the link to display index number and show the correct user profile instead of using the profile number? Any guidance on how to implement a search function too? Thank you!