One variable is not rendered on page - reactjs

Question

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;