I am calling a prop 2 times but it is working first time not working seond time

import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom';
import './Allproducts.css'
import Categories from './categories.json'
import ForYouItem from './ForYouItem'

export default function Allproducts(props) {
    const [products, setProducts] = useState([]);
    useEffect(() => {
        fetch(`https://fakestoreapi.com/products/category/${props.category}`)
            .then((res) => res.json())
            .then((data) => setProducts(data))
    }, [])
  return (
    <>
    <div className="banner">
        <h1>All Products</h1>
        <h4>Get best items in budget</h4>
    </div>
            <div className="main-grid">
                <div className="left-grid">
                    <div className="left-categories">
                    <h1>Collections</h1>
                    {Categories.map((category) => {
                        let Afeef = `/${props.category}`
                        return (
                            
                          <Link to= {Afeef} className='products-categories'> <h4>{category.title}</h4></Link>


                        )

                    }

                    )}
                    </div>
                </div>

                <div className="right-grid">
                    
                <div className="row ">
                    {products.map((product) => {
                        return (
                            <div className="col-md-4 my-2 Products-1">
                                <ForYouItem Title={product.title.slice(0, 50)} Price={product.price} Imageurl={product.image} rate={product.rating.rate} count={product.rating.count} />
                            </div>


                        )

                    }

                    )}
                    
                   
                    
                </div>
                </div>
            </div>
    </>
  )
}

So in this code I am calling same prop two times, first in this line; fetch(https://fakestoreapi.com/products/category/${props.category}) Secondly here; let Afeef = /${props.category} The prop is working in the First line but on the second line it gives no result. The link isn't changed. What I want is when I click on second Link I get redirected "/${props.category}" but the URL is not changing

Code for App.js:

import React, { Component } from 'react'
import './App.css';

import NavBar from './components/NavBar';
import TopBar from './components/TopBar'
import {
  HashRouter,
  Routes,
  Route,
} from "react-router-dom";
import Mainpage from './Mainpage';
import Login from './components/Login';
import Signup from './components/Signup';
import Allproducts from './components/Allproducts';
function App() {
  return (
    <div>
      <HashRouter>
      <TopBar/>
      <NavBar/>
      <Routes>
      <Route path="/" element={<Mainpage/>}></Route>
      <Route path="/Login" element={<Login/>}></Route>
      <Route path="/Signup" element={<Signup/>}></Route>

      <Route path="/jewelery" element={<Allproducts category="jewelery"/>}></Route>
      <Route path="/electronics" element={<Allproducts category="electronics"/>}></Route>
      <Route path="/men's clothing" element={<Allproducts category="men's clothing"/>}></Route>
      <Route path="/women's clothing" element={<Allproducts category="women's clothing"/>}></Route>
      </Routes>
      </HashRouter>
    </div>
  );
}


export default App;