How can I wait for all async functions to be completed in useEffect before updating loading state?

I am trying to receive a list of book IDs from my API. For each book ID, I want to fetch its data from Google’s book API. Once all book info has been retrieved, I want to render divs for them. However, the loading state is being changed before each fetch has completed. Can someone explain to me why this is happening?

function ReadingListPage({ userID }) {
  const [books, setBooks] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  let bookIds = [];

  useEffect(() => {

    const getBookInfo = async (bookId) => {
      const response = await fetch(`https://www.googleapis.com/books/v1/volumes/${bookId}`);
      const resJson = await response.json();
      setBooks([...books, resJson]);
      Promise.resolve();
    };

    const getBookIds = async () => {
      const response = await fetch(`//localhost:3001/user/reading_list/${userID}`);
      const resJson = await response.json();
      bookIds = resJson;

      await Promise.all(
        bookIds.map(async (bookId) => {
          await getBookInfo(bookId);
        })
      );

      setIsLoading(false);
    };

    getBookIds();
  }, []);

  return (
    <ContentLayout>
      <BookDisplay>
        {!isLoading && <BookSection name={"Your Reading List"} books={books}></BookSection>}
      </BookDisplay>
    </ContentLayout>
  );
}