mysql（workbench）を通してparamsをもとにタスクをdeleteしたい

Question

前提

技術者の皆様、お仕事お疲れ様です。
現在React, javascript, mysqlを用いてタスク管理アプリを作成中です。
deleteボタンを押すことでタスクを削除したいのですが、どうも削除したいparamsのidを取得できず、params.taskidが[object Object]となってしまいます。
■■な機能を実装中に以下のエラーメッセージが発生しました。

実現したいこと

deleteボタンを押すことでworkbenchからtaskidを取得したい。

• ▲▲機能を動作するようにする

発生している問題・エラーメッセージ

Error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '[object Object])' at line 1
    at Packet.asError (/Users/takagiryo/portfolio/todo-manager/server/node_modules/mysql2/lib/packets/packet.js:728:17)
    at Query.execute (/Users/takagiryo/portfolio/todo-manager/server/node_modules/mysql2/lib/commands/command.js:29:26)
    at Connection.handlePacket (/Users/takagiryo/portfolio/todo-manager/server/node_modules/mysql2/lib/connection.js:456:32)
    at PacketParser.onPacket (/Users/takagiryo/portfolio/todo-manager/server/node_modules/mysql2/lib/connection.js:85:12)
    at PacketParser.executeStart (/Users/takagiryo/portfolio/todo-manager/server/node_modules/mysql2/lib/packet_parser.js:75:16)
    at Socket.<anonymous> (/Users/takagiryo/portfolio/todo-manager/server/node_modules/mysql2/lib/connection.js:92:25)
    at Socket.emit (events.js:400:28)
    at addChunk (internal/streams/readable.js:293:12)
    at readableAddChunk (internal/streams/readable.js:267:9)
    at Socket.Readable.push (internal/streams/readable.js:206:10) {
  code: 'ER_PARSE_ERROR',
  errno: 1064,
  sqlState: '42000',
  sqlMessage: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '[object Object])' at line 1",
  sql: 'DELETE FROM todotaskmanager.tasks where (taskid=[object Object])'
}

該当のソースコード

client側のTaskList.jsです。

import React, { useEffect,useState } from 'react'
import axios from 'axios'

const TaskList = () => {
    const [text, setText] = useState('')
    const [taskList, setTaskList] = useState([])

    useEffect(() => {
        const getTaskList = () => {
            axios.get('http://localhost:4000/tasks') 
                .then((response) => response.data)
                .then((response) => setTaskList(response))
        }
        getTaskList()
    },[text])
    
    const onSubmitClick = (e) => {
        axios.post('http://localhost:4000/addTask', {
            task: text,
        })
        setText('')
    }


    const doneClick = () => {
        console.log('done!');
    }

    const onDeleteClick = (taskid) => {
        axios.delete(`http://localhost:4000/deleteTask/${taskid}`)
    }

    return (
        <div>
            <h3>taskList</h3>
            <div className='ui input'>
                <input value={text} type='text' onChange={(event) => setText(event.target.value)} placeholder='your task...' />
            </div>
            <button className='ui primary button basic' onClick={onSubmitClick}>Submit</button>
            <hr />
            <div className="ui cards">
                {
                    taskList.map((task, taskid) => (
                        <div className="card" key={taskid}>
                            <div className="content">
                                <div className="meta">
                                    {task.task}
                                </div>
                                <div className="extra content">
                                    <div className="ui two buttons">
                                        <button className="ui basic green button" onClick={doneClick}>Done</button>
                                        <button className="ui basic red button" onClick={onDeleteClick}>Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))}
            </div>
        </div>
    )
}

export default TaskList

server側のserver.jsです

const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const connection = require('./db')

const app = express()

app.use(cors())
app.use(bodyParser.json())

app.get('/tasks', (req, res) => {
    const TASK_QUERY = "select * from todotaskmanager.tasks"
    connection.query(TASK_QUERY, (err, response) => {
        if (err) console.log(err);
        else res.send(response)
    })
})

app.post('/addTask', (req, res) => {
    const ADD_QUERY = `insert into todotaskmanager.tasks (task) values ('${req.body.task}')`
    connection.query(ADD_QUERY, (err) => {
        if (err) {
            console.log(err);
        } else {
            res.send('task added')
        }
    })
})

app.delete('/deleteTask/:taskid', (req, res) => {
    console.log(req.params.taskid);
    const DELETE_QUERY = `DELETE FROM todotaskmanager.tasks where (taskid=${req.params.taskid})`
    connection.query(DELETE_QUERY, (err, res) => {
        if (err) console.log(err);
    })
})

app.listen(4000, () => {
    console.log('running on PORT 4000...')
})

また、現在利用中のworkbenchの画像です。

試したこと

ここに問題に対して試したことを記載してください。

const onDeleteClick = (taskid) => {
        axios.delete(`http://localhost:4000/deleteTask/tasks/${taskid}`)
    }

としてみましたが、上手くいきませんでした。

補足情報（FW/ツールのバージョンなど）

mysql@8.0

---

皆様のお力、ぜひお貸しいただければと思います。宜しくお願いいたします。