filepond library and plugins not being detected

I am learing Node.JS by webdevsimplified and i am developing a book library website and i am facing an issue. I have imported a filepond library and some plugins. They are working perfectly fine when i try to add a new book but when i try to edit an existing book the filepond library does not appear to be working then if i try to edit image then it throws an error an automatically filepond start to work i have debugged everything and i can not understand why is this happening.
this is what comes up and everything works without error except the cover updation. if i try to update cover it throws an error and then shows the page that is originally intended to show

Some Code related to edit routes

books.js

    router.get('/:id/edit', async (req,res)=>{
        try {
            const book = await Book.findById(req.params.id)
            renderEditPage(res, book)
        } catch {
            res.redirect('/')
        }
    })
    
    // Update book route
    router.put('/:id', async (req,res)=>{
        let book
    
        try {
            book = await Book.findById(req.params.id)
            book.title = req.body.title
            book.author = req.body.author
            book.publishDate = new Date(req.body.publishDate)
            book.pageCount = req.body.pageCount
            book.description = req.body.description
            if(req.body.cover != null && req.body.cover !== ''){
            saveCover(book, req.body.cover)
            }
            await book.save()
            res.redirect(`/books/${book.id}`)
        } catch{
            if(book != null){
                renderEditPage(res,book, true)
            } else {
                redirect('/')
            }
        }
    })
    
    router.delete('/:id', async (req, res) => {
        let book
        try {
          book = await Book.findById(req.params.id)
          await book.remove()
          res.redirect('/books')
        } catch {
          if (book != null) {
            res.render('books/show', {
              book: book,
              errorMessage: 'Could not remove book'
            })
          } else {
            res.redirect('/')
          }
        }
      })
    
    async function renderNewPage(res,book , hasError = false){
        renderFormPage(res,book,'new',hasError)
    }
    
    async function renderEditPage(res,book , hasError = false){
        renderFormPage(res,book,'edit',hasError)
    }
    
    async function renderFormPage(res,book , form, hasError = false){
        try{
            const authors = await Author.find({})
            const params = {
                authors: authors,
                book: book,
            }
            if(hasError){
                if(form === 'edit'){
                    params.errorMessage = 'Error Updating Book'
                }
                else {
                    params.errorMessage = 'Error Creating Book'
                }
            }
            res.render(`books/${form}`, params)
        }catch{
            res.redirect('/books')
        }
    }
    
    function saveCover(book, coverEncoded){
        if (coverEncoded == null) return
        const cover = JSON.parse(coverEncoded)
        if (cover != null && imageMimeTypes.includes(cover.type)){
            book.coverImage = new Buffer.from(cover.data, 'base64')
            book.coverImageType = cover.type
        }
    }
    
    module.exports = router

edit.ejs

    <h2>Edit Book</h2>
    
    <form action="/books/<%= book.id %>?_method=PUT" method="POST">
        <%- include('_form_fields') %>
        <a href="/books">Cancel</a>
        <button type = "submit">Update</button>
    </form>

also the URL for the wrong edit page is http://localhost:3000/books/64ca52c7a9b8a5350ccb4e00/edit

while URL after an error is thrown becomes
http://localhost:3000/books/64ca52c7a9b8a5350ccb4e00?_method=PUT