null is returned when fetching the api in react

I want to generate a page of items fetched from the api, each item has an id. If you click on one of those items, a page is being generated based on the template and item’s id, so I need to pass id to the template. I managed to create the page with items, however when I try to generate an item page the fetch doesn’t make any requests at all, thus resulting with null.
I tested this endpoint in swagger and it works perfectly.

App.tsx:

<Route path='/products/honey/:id' element={<Honey />} />

A page with items:

{items.map((item) => (
       <Link
         to={`/products/honey/${item.id}`}
         style={{ textDecoration: 'none' }}
        >
        <div>
         <div key={item.id} className={styles.item}>
         <img src={item.img_url} />
         <h1>{item.item_name}</h1>
         <h3>{item.price} руб.</h3>
         <button>В корзину</button>
        </div>
       </div>
      </Link>
))}

Item template page:

const {id} = useParams<{id: string}>();
const [error, setError] = useState(null)
const [result, setResult] = useState(null)
const [isLoaded, setIsLoaded] = useState(false)
const [item, setItem] = useState<item | null>(null);
useEffect(() => {
        fetch(`http://localhost:8000/items/by_id/${id}`)
            .then((res) =>
                res.json()
            )
            .then(
                data => {
                    setResult(data)
                    setItem(data)
                    console.log(item)
                },
                (error) => {
                    setIsLoaded(true)
                    setError(error)
                }
            )

    }, [id])

I tried to change localhost in URL to my docker container’s name, but it doesn’t matter as page with items works just fine with this URL. CORS can’t be an issue either as page with items loads just fine.