could you share more of your code? maybe have a codesandox example? It seems to be a styling issue but it's hard to tell without more code.

-edit-

your button should be separated from your list of books, this is the reason why it essentially "follows" your last book card.

Try to do something like this

return (
  <section className='wrapper'>
    <div className='bookList'>
      {booksData.map(book => {
         //code your books here
      }
    </div>
    //then put your button out of the div
    <button onClick={function}>hide books</button>
  </section>
)

your CSS for the wrapper div could be something like this

.wrapper{
  display: flex;
  flex-direction: column
}

this way you'll have the books first then the button will be displayed below the list

Place the button as the next sibling to the section of Books. Shown in the following. All I did was to move the button out of the section. You will have to style the button with padding and such for the updated layout.

// in index.js, BookList

  return (
    <>
    <section className="booklist">
      {booksData.map((book, index) => {
        return (
          <Book
            key={index}
            {...book}
            removeIndividualBook={removeIndividualBook}
          ></Book>
        );
      })}
    </section>
      {booksData.length === 0 ? (
        <button onClick={handleShowBook}>Show Books</button>
      ) : (
        <div style={{ position: "relative", minHeight: "100vh" }}>
          <button
            style={{
              // position: "absolute",
              // marginTop: "2350px",
              // marginLeft: "28px",
              position: "absolute",
              //left: "12%",
              bottom: "",
            }}
            onClick={clearBooks}
          >
            Hide Books
          </button>
        </div>
      )}
    </>
  );