One variable is not rendered on page

I have a NewBook Form in which i enter data, like this:

   const meetupData = {
      title: enteredTitle,
      image_url: enteredImage,
      description: enteredDescription,
      author: enteredAuthor,
      genre: enteredGenre,
      release_date: enteredRelease_date,
    };

Later on i am fetch the data, and render it on page where all books shoudl be. It all works, but I also want to render one value. The rate of the book. The difference is that I dont specify the rate of the book in NewBookForm. I am doing it after the book was added in a special component using just a simple:

const ratingHandler1 = () => {
    axios.post(`http://localhost:5000/api/book/${props.id}/rate`, { score: 3 });
  };

on

 <button onClick={ratingHandler1}>Rate 3 </button>

It all works and the data is added to Database ( postgres). But when I am trying to render it on page as i do with other values:

          <h3>Title: {props.title}</h3>
          <p>Author: {props.author}</p>
......................
          <p>Gatunek: {props.score}</p>

The score is not shown. I assume that this is because I dont fetch data after i Add a Book, and i want to change it, but I don't know how. If anyone could help me that would be awesome. The code which fetch data, and later on directs it to the BooksList:

import { useState, useEffect } from "react";

import BookList from "../components/meetups/BookList";

function AllBooksPage() {
  const [isLoading, setIsLoading] = useState(true);
  let [loadedBooks, setloadedBooks] = useState([]);

  useEffect(() => {
    setIsLoading(true);
    fetch("http://localhost:5000/api/book")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        const books = [];

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

          books.push(book);
        }
        setIsLoading(false);
        setloadedBooks(books);
      });
  }, []);
  let [data, setData] = useState([]);
  const [sortType, setSortType] = useState("title");
  useEffect(() => {
    const sortArray = (type) => {
      const types = {
        title: "title",
        release_date: "release_date",
        score: "score",
      };
      const sortProperty = types[type];
      const sorted = [...loadedBooks].sort((a, b) =>
        ("" + a[sortProperty]).localeCompare("" + b[sortProperty])
      );
      setData(sorted);
    };

    sortArray(sortType);
  }, [loadedBooks, sortType]);

  if (isLoading) {
    return (
      <section>
        <p>Loading...</p>
      </section>
    );
  }

  return (
    <section>
      <h1>All Books</h1>
      <select defaultValue="Sort" onChange={(e) => setSortType(e.target.value)}>
        <option disabled value="Sort">
          Sortuj
        </option>
        <option value="title">Alfabetycznie</option>
        <option value="release_date">wg. daty</option>
        <option value="score">wg. score</option>
      </select>
      <BookList books={data} />
    </section>
  );
}

export default AllBooksPage;

Of course everything is added to BookItem.

import BookItem from "./BookItem";
import classes from "./BookList.module.css";

function BookList(props) {
  return (
    <div className={classes.list}>
      {props.books.map((book) => (
        <BookItem
          key={book.id}
          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}
          score={book.score}
          rating_sum={book.rating_sum}
          rating_count={book.rating_count}
        />
      ))}
    </div>
  );
}

export default BookList;