Passing 'status' of useMutation to child components doesn't behave as expected

[yjc2021]

Hi, I'm trying to make a simple reusable modal that calls a mutation and tracks the status of the mutation call.

I want the component to support various mutations so my first thought was to pass mutate function and status as props to the child component (the reusable modal).

const Parent = () => {
  const { mutate, status } = useMutation({
    mutationFn: () => new Promise((resolve) => setTimeout(() => resolve("test"), 3000)),
  });

  return <Child onMutate={mutate} status={status}/>;
};

const Child = ({ onMutate, status }: Props) => {
  return (
    <div>
      <button onClick={onMutate}>Mutate</button>
      <div>{status}</div>
    </div>
  );
};

the mutate function works fine but status state is not being updated inside the child component. Can anyone give me feedback on this particular situation?

I was able to work around the problem using useMutationStatus but I am still very curious to why the approach above doesn't work as expected. I am new to the tanstack world, so I might be missing something... I'd be grateful for some advice.

(Something like this)