Reset form after Submit not working as expected?

import { Button } from '@/components/ui/button';
import { useAppForm } from '@/hooks/form';
import { useStore } from '@tanstack/react-form';
import { z } from 'zod';

const formSchema2 = z.object({
  gender: z.boolean(),
});

export function TestForm() {
  const form = useAppForm({
    defaultValues: {
        gender: true,
    },
    validators: {
      onChange: formSchema2,
    },
    onSubmit: async (params) => {
      // params.value is correct here. If the toggle is false, it shows params.value.gender is false
      console.log(params.value);

      params.formApi.reset(params.value);
      // after this line, the form goes back to the original defaultValues ({gender: true}) instead of the new one ({gender:false})
    },
  });

  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          form.handleSubmit();
        }}
      >
        <form.AppForm>
          <form.AppField
            name='gender'
            children={(field) => <field.ToggleField name={field.name} label='Show on Resume' className='ml-2' />}
          />
          <Button type='button' onClick={() => form.handleSubmit()} disabled={!isDirty} className='mt-4'>
            Submit
          </Button>
        </form.AppForm>
      </form>
    </div>
  );
}