setQueryData not re-rendering the React Component

Issue:

I’m running setQueryData to update query data while also updating the internal state of the component. This causes the component to not re-render after the change in query data

const updater = (nextData) => {
    /**
     * Appending new task to the top of the array
     * but react component is not re-rendering...
     */
    queryClient.setQueryData("todos", (oldData) => {
      return [...nextData, ...oldData];
    });
};

Inside React component

<button onClick={() => {
          updater([
            {
              id: 0,
              title: newTaskText
            }
          ]);
          setNewTaskText("new task");
        }}
      >
        Add
</button>

To Reproduce

Refer the codesandbox

• Clicking on Add Task will add the new task to query data
• But you need to click add task twice to see it re-render in the UI