ReactJs and Graphql Mutation: Unhandled Rejection (Error): Response not successful: Received status code 400

Question

I am building a simple Todolist application to display all the data using a query and add todo, delete todo mutation. I have used apollo server and apollo client for this. My query to display the data and mutation to add a todo task is working but unable to run the mutation in the frontend i.e; reactJs. This is the problem with integration of backend and frontend. I am unable to understand to delete a mutation by id where we need to pass this id. Here is my code.

import React from 'react';
import { Queries } from '../Hooks/Queries';
import { useQuery, gql } from '@apollo/client';
import { useMutation } from "@apollo/client";

const DELETE_USER_MUTATION = gql`
  mutation deleteTodo($id: ID!){
      deleteTodo(id:$id){
        id
      }
  }
`;

function CharacterList() {
  const {error,loading,data} = Queries();
    console.log({error,loading,data});
    const [deleteTodo] =  useMutation(DELETE_USER_MUTATION,{
    });
    if (loading) return <div>Spinner...</div>;
    if (error) return <div>Something went Wrong</div>;
    return (
        <div>
          <h1>Hello world</h1>
          {data.getTodos.map((argument) => {
            return (
              <div>
                <h3>{argument.title}</h3>
                <p>{argument.detail}</p>
                <p>{argument.id}</p>
                <button onClick={()=>{
                  deleteTodo({variables:{id: argument.id }});
                  }}>Delete</button>
              </div>
            )
          })}
        </div>
    );
}

export default CharacterList;