How should I pass data to the component after routing?

How can I pass the data from the BookList to the Book component after routing and then print it?
I’m trying to use the state but I’m not sure if that’s the right approach, please suggest to me how it should be done correctly.

BookList.js

import React from "react";
import { Link } from "react-router-dom";

const BookList = () => {
  return (
    <>
      <Link
        to={{
          pathname: "/books/1",
          state: {
            id: 1,
            title: "The Hobbit",
            description: "A hobbit goes on an adventure",
          },
        }}
      >
        Book 1
      </Link>
    </>
  );
};

export default BookList;

Book.js

import React from "react";

const Book = () => {
  return (
    <div>
      <h1>Book</h1>
    </div>
  );
};

export default Book;