useMutation onSuccess and isPending wont execute in array of items

[cafeasia3]

I have list of tasks and each task have mark as complete button using useMutation. I have created the button component with seperate useMutation inside it. The problem is onSuccess wont execute if user click mark as complete on next row before previous one finished. so is the isPending, it will set to false before onSucess execute to update the list. I used the isPending state to disable the button to prevent multiple click.
This seems onSuccess, isPending on previous rows are affected by other rows mutation.

the button component looks like this

const MarkAsCompletedDeviceLargeBtn = ({val}) => {
        const markAsCompleteReq = useMarkAsComplete()
        const markAsCompleted = (upreminderId, status, key, isSkipped) => {
            console.log('mark as completed', upreminderId, status, key)
            const data = {
                upreminder_id: upreminderId,
                is_skipped: isSkipped,
            }
            markAsCompleteReq.mutate(data, {
                onSuccess: (res) => onSuccess(res, upreminderId),
                onSettled,
                onError,
            })

        };

        const onSuccess = (res, upreminderId) => {
            console.log('SUCCESS', res)

        }

        const onError = (error) => {
            console.log('error', error)
        }

        const onSettled = (res) => {
            console.log('settled', res)
            
        }

        const skipCompleteTask = (...) => {
            ...
        }
        return(
            <>
            {
                markAsCompleteReq.isPending ?
                    <button className="btn btn-success btn-disabled btn-xs"><span className="loading loading-spinner"></span> loading</button>
                :
                    <button 
                            className="btn btn-outline btn-warning btn-xs mr-1"
                            onClick={() => skipCompleteTask(...)}
                        >
                            Mark as complete {name}
                        </button>
            }
            </>
        )
    }

the mutation hook

    export const useMarkAsComplete = () => {
    return useMutation({ 
        mutationKey: ['markAsComplete'],
        mutationFn: (data) => {
            return axios.post(route('mark_as_completed'), data).then(function (res) {
                return res
            })
        },
    })
}

Any ideas how to solve this?

[TkDodo]

please show this in a minimal, executable reproduction.

[cafeasia3]

found the problem this is related to ##3412