タスクのチェックボックスにチェックを入れると、横線を入れたい

ReactとLaravelで簡単なSPA開発を行なっています。
そこで、チェックボックスにチェックを入れるとタスクに横線を入れる実装しているときにエラーが起こりました。

エラー内容が

Failed to load resource: the server responded with a status of 404 (Not Found)

status code 404
    at createError (app.js:618)
    at settle (app.js:889)
    at XMLHttpRequest.handleLoad (app.js:93)

です。
この二つはチェックボックスをクリックした際に出るエラー分となります。

実現したいことは、チェックボックスにチェックを入れると、タスクに横線が入るような実装を目指しています。

コードは、

api.php

php
1<?php
2
3use Illuminate\Http\Request;
4use Illuminate\Support\Facades\Route;
5
6/*
7|--------------------------------------------------------------------------
8| API Routes
9|--------------------------------------------------------------------------
10|
11| Here is where you can register API routes for your application. These
12| routes are loaded by the RouteServiceProvider within a group which
13| is assigned the "api" middleware group. Enjoy building your API!
14|
15*/
16Route::apiResource('tasks', 'taskController');
17Route::patch('tasks/update-done/{task}', 'TaskController@updateDone');
18
19Route::middleware('auth:api')->get('/user', function (Request $request) {
20    return $request->user();
21});

コントローラーのコード（省略して該当のコード部分と思われるところを抜粋してます）

php
1 /**
2     * is_doneの更新
3     * Remove the specified resource from storage.
4     *
5     * @param  \App\Models\Task $task
6     * @param  Request $request
7     * @return \Illuminate\Http\JsonResponse
8     */
9    public function updateDone(Task $task, Request $request)
10    {
11        $task->is_done = $request->is_done;
12
13        return $task->update()
14        ? response()->json($task)
15        : response()->json([], 500);
16    }

APIからデータを取得しています

javascript
1import axios from "axios";
2
3
4const getTasks = async () => {
5    const {data}  = await axios.get('api/tasks');
6    return data
7}
8
9const updateDoneTask = async ({id, is_done}) => {
10    const {data}  = await axios.patch(
11        `/api/tasks/update-done/${id}`,
12        {is_done: !is_done}
13    )
14    return data
15}
16
17export 
18{
19    getTasks,
20    updateDoneTask
21};

javascript
1import * as api from '../api/TaskApi'
2import { useQuery, useMutation, useQueryClient } from "react-query";
3
4const useTasks = () => (
5    useQuery('tasks', () => 
6        api.getTasks()
7    )
8)
9
10const useUpdateDoneTask = () => {
11    const queryClient = useQueryClient()
12
13    return useMutation(api.updateDoneTask, {
14        onSuccess: () => {
15            queryClient.invalidateQueries('tasks')
16        }
17    })
18}
19
20export 
21{
22    useTasks,
23    useUpdateDoneTask
24};

ここのpropsはタスクのデータ（id,title ,is＿done,
data)が入ります

javascript
1import React from 'react';
2import TaskItem from './TaskItem';
3
4const TaskList = (props) => {
5    // console.log(props.tasks)
6    return (
7        <div className="inner">
8            <ul className="task-list">
9                        {props.tasks.map(task => (
10                            <TaskItem  task={task}/>
11                            // console.log(task)
12                        ))}
13            </ul>
14        </div>
15    )
16}
17
18export default TaskList;

javascript
1import React from 'react';
2import { useUpdateDoneTask } from '../queries/TaskQuery';
3
4const TaskItem = (props) => {
5    const UpdateDoneTask = useUpdateDoneTask();
6    console.log(props.task.is_done)
7
8    return(
9        <li key={props.task.id} className={props.task.is_done ? 'done' : ''}>
10            <label className="checkbox-label">
11                <input
12                    type="checkbox"
13                    className="checkbox-input"
14                    onClick={ () => 
15                        UpdateDoneTask.mutate(props.task.is_done)}
16                    />
17            </label>
18            <div><span>{props.task.title}</span></div>
19            <button className="btn is-delete">削除</button>
20        </li>
21    )
22}
23
24export default TaskItem;