Link to a page with proper id, but fetch does not find element with this id

on main page a have i link on image-click.

<Link to={`/${props.id}`}>
          <div className={classes.image}>
            <img src={props.image_url} alt={props.title} />
          </div>
        </Link>

This link should redirect the user to page with Book Details with specified id So i used fetch to get all the books.

import { useState } from "react";
import { useParams, Link } from "react-router-dom";
import HighligtedBook from "../components/meetups/HighligtedBook";
const BookDetail = () => {
  let [loadedMeetups, setLoadedMeetups] = useState([]);
  fetch("http://localhost:5000/api/book")
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      const meetups = [];

      for (const key in data) {
        const meetup = {
          id: key,
          ...data[key],
        };

        meetups.push(meetup);
      }
      setLoadedMeetups(meetups);
    });
  const params = useParams();

  const book = loadedMeetups.find((quote) => quote.id === params.quoteId);
  if (!book) {
    return (
      <div>
        <p> Not found </p>
        <Link to={`/`}>
          <button> Go back </button>
        </Link>
      </div>
    );
  }

  return (
    <HighligtedBook
      author={book.author}
      id={book.id}
      image_url={book.image_url}
      title={book.title}
      release_date={book.release_date}
      description={book.description}
      genre={book.genre}
      rating_sum={book.rating_sum}
    />
  );
};

export default BookDetail

But it does not work as it shoudl. Does anyone have an idea how should i write it the proper way? Althoug in my database i have a proper id, a the Link directs me to the page with proper http://localhost:3000/id but it gives me <p> Not found </p> as it did not find a book with this id. Is there any other option f.e importing array from AllBooks Component?