Javascript – This is a React app. When I am trying to download a pdf from local folder, I am not able to download

I have this code where I have a large number of books to display in my website.
These books are stored in my local react folder (Ebooks > src > assets > books > bookName.pdf). These can be accessed from a component (Books.js) by "../../assets/books/bookName.pdf".

Now I got a problem that i am not able to download my books when i click on download button(anchor tag).

When I hover over the Download button the I could see a redirected link showing path "localhost:3000/assets/books/bookName.pdf".

I tried importing book manually "import PythonBook from ‘../../assets/books/PythonBook.pdf";
and a download button "download". This worked.
But I have 100 books to be displayed.

I want to download books when I click on the download button.
What should i do?

//React Component
// Books.js

import { useState, useEffect } from ‘react’;
export default function Books() {

const [books, setBooks] = useState([]);

useEffect(() => {
    const importBooks = async () => {
        try {
            const bookContext = require.context("../../assets/books", false, /.pdf$/);

            const bookFiles = bookContext.keys().map((filename, index) => {
                console.log('File path:', filename);
                const title = filename.replace(/^./|NotesForProfessionals/g, '').replace(/.pdf$/, '');
                return {
                    id: index + 1,
                    title,
                    author: "goalkicker",
                    download_link: `../../assets/books/${filename.replace(/^.//, '')}`, // Remove the leading "./"
                };
            });

            console.log('Books:', bookFiles);
            setBooks(bookFiles);
        } catch (error) {
            console.error('Error importing books:', error);
        }
    };


    importBooks();
}, []);

return (
    <>
        <div className="books_container" id="books_container">
            <header>Explore Books</header>
            
            <div className="books">
                {books.map(book => (
                    <div className="book_bg" key={book.id}>
                        <div className="book">
                            <p className="book_title">{book.title}</p>
                            <p className="author">by {book.author}</p>
                            <a
                                download
                                href={book.download_link}
                                className="download_btn download_link"
                            >
                                Download
                            </a>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </>
);

}