How can I remove the participant in the client before updating the actual state when submit button is click?

I’m currently using react-hook-form and TanstackQuery. Basically I fetch the data using tanstack query and then on my formfield, I use defaultValues to show the data first, but the problem I’m encountering is, since I have a list of users, I want to delete it on client first

edit/[id]/page/tsx.

const EditAppointment =({params}) => {

  const appoinment = useQuery({
    queryKey: ['appointment', 'data', 'history', id],
    queryFn: () => fetch(`/api/single-sched/${id}`).then((res) => res.json())
  })


  const { data } = appoinment

  const form = useForm<CreateAppointmentSchemaType>({
    resolver: zodResolver(CreateAppointmentSchema),
  });

  const removeAssistant = (name: string) => (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    console.log(`Removing assistant: ${name}`);
  }

return (
   <Form {...form}>
     <form>
       <FormField
            control={form.control}
            name="title"
            defaultValue={data?.title}
            render={({ field }) => (
                <FormItem>
                  <FormLabel>Title</FormLabel>
                      <FormControl>
                        <Input {...field} />
                      </FormControl>
                    </FormItem>
                  )}
           />


<Table className='max-w-[400px]'>
      <TableHeader>
           <TableRow>
              <TableHead>Name</TableHead>
               <TableHead>Email</TableHead>
               <TableHead></TableHead>
           </TableRow>
              </TableHeader>
                 <TableBody>
                   {data?.name_of_assistance.map((item:{name: string, email: string}) => {
                          return (
                            <TableRow>
                          <TableCell>{item.name}</TableCell>
                          <TableCell>{item.email}</TableCell>
                          <TableCell> 
                            <Button onClick={() => removeAssistant(item.name)}  
           variant="destructive" size="icon">
                              <Trash2 /> 
                            </Button>
                             </TableCell>
                        </TableRow>
                          )
                        })} 
                      </TableBody>
                    </Table>

     </form>
   <Form />
)
}