Is there a way to stop useMutation from setting `data` to `undefined` before updating it to a new value?

I have a mock mutation like so:

interface Person {
  firstName: string;
  lastName: string;
}

async function sendPersonApi({ firstName, lastName }: Person) {
  await new Promise((res) => setTimeout(res, 1000));
  return {
    firstName,
    lastName,
    status: "success"
  };
}

I have two components: <Form /> and <Output />. I basically want the mutation to run on form submit of the <Form />, and then show the result of that mutation in the <Output />.

I have a CodeSandbox with this behavior mostly working: https://codesandbox.io/s/long-worker-k350q?file=/src/App.tsx

Form

const personAtom = atom<Person>({
  firstName: "",
  lastName: ""
});

function Form() {
  const [formState, setFormState] = useAtom(personAtom);

  const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
    (event) => {
      event.preventDefault();
      const formElement = event.currentTarget;
      const formData = new FormData(formElement);
      const firstName = formData.get("firstName") as string;
      const lastName = formData.get("lastName") as string;
      setFormState({ firstName, lastName }); // This does not update the `data`/`isLoading`/`isError` in the <Output /> component
    },
    [setFormState]
  );

  return (
    <form id="name-form" onSubmit={handleSubmit}>
      <input name="firstName" /> <br />
      <input name="lastName" /> <br />
      <button>Submit</button>
    </form>
  );
}

Output

function Output() {
  const [person] = useAtom(personAtom);
  const { mutate, data,  isLoading, isError } = useMutation(sendPersonApi, {
    mutationKey: "sendPerson"
  });

  useEffect(() => {
    mutate(person);
  }, [person]);

  return (
    <output name="name-output" form="name-form">
      <p>data: {JSON.stringify(data)}</p>
      <p>isLoading: {JSON.stringify(isLoading)}</p>
      <p>isError: {JSON.stringify(isError)}</p>
    </output>
  );
}

Initially, I had wanted to implement this by doing the mutation itself inside the <Form /> submit handler, but it seems like I was not be able to access the data/isLoading/isError in a different component even if I used the same mutationKey in useMutation.

So I ended up changing the implementation so that the submit handler just updates some global state (using jotai atoms), and then in the Output I have an effect that listens for changes to this global state and then calls mutate().

The problem now though is that the data always gets reset to undefined in every subsequent submit before getting a new value. Is there a way to stop useMutation from setting data to undefined before updating it to a new value?

Also, is there a cleaner way of using the result of a mutation in another component? I'd prefer to have the mutate() done inside the Form and then somehow use the data/isLoading/isError in a different component without having to rely on useEffect.