Https://www.codecademy.com/courses/learn-react-router/projects/pet-adoption-website

Hi! I’m doing react project ‘Pet adobtion website’ and stuck on the task 8.
Https://www.codecademy.com/courses/learn-react-router/projects/pet-adoption-website

App.js

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, Routes, Route } from ‘react-router-dom’;

function App() {
return (


    <Route path="/:type" element={<HomePage />} />
    <Route path="/" element={<HomePage />} />
  </Routes>
 
</BrowserRouter>

);
}

export default App;

home/index.js

const HomePage = () => {
const [data, setData] = useState(null);
const {type} = useParams(); // Fix me!
…}

I am using react-router v6. There is no optional param in this version. What can be alternativ way to solve this?

On this stage it should display data, but in my code is only navbar

Thank you!