Adopt-a-pet project, question #13

Good morning everyone!
I am currently working on the adopt a pet project in the React Lesson and I am having a bit of a hard time understanding the directions of question 13 which states:

To make this page render the details for the actual pet your user has selected, use the useParams() hook to get the value of the :id URL parameter in the PetDetailsPage component.

To test that your code works, refresh the page. You should see the details for the pet whose picture you clicked previously.

I am properly using the useParams hook ( so I thought), but I am not sure I am questioning if that is the right hook to use? Even though the directions say to use useParams why couldn’t I use useRouteMatch hook If I am trying to receive a URL? Basically I am asking “what am I doing wrong here?” because I cannot get the proper results I am looking for in the project. I have looked through the lesson, forms and videos but no obvious answer.

detail/index. js

import React, { useEffect, useState } from 'react';
import { getPetDetails } from '../../api/petfinder';
import Hero from '../../components/hero';
import {useParams} from 'react-router-dom';

const PetDetailsPage = () => {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const {id} = useParams() // <--- Update me!

  useEffect(() => {
    async function getPetsData() {
      try {
        const petsData = await getPetDetails(id);
      } catch (e) {

  }, [id]);

  return (
      {loading ? (
      ) : error ? (
          {/* Redirect to /pet-details-not-found if there was an error! */}
      ) : (
            image={[1]?.full || ''}
            displayText={`Meet ${}`}
          <div className="pet-detail">
            <div className="pet-image-container">
        [0]?.medium || ''
              <h3>Breed: {data.breeds.primary}</h3>
              <p>Color: {data.colors.primary || 'Unknown'}</p>
              <p>Gender: {data.gender}</p>

export default PetDetailsPage;


import HomePage from './pages/home';
import SearchPage from './pages/search';
import PetDetailsPage from './pages/detail';
import PetDetailsNotFound from './pages/petDetailsNotFound';
import Navigation from './components/navigation';
import {BrowserRouter as Router, Route} from 'react-router-dom';

function App() {
  return (
        <Route path = '/:type/:id'>
          <PetDetailsPage />

      <Navigation />
      <Route path="/:type?">
      <HomePage />

export default App;