onSettled throws annot update a component (`HotReload`) while rendering a different component

onSettled: async () => await queryClient.invalidateQueries({ queryKey: ['products'] })

onSettled: () => queryClient.invalidateQueries({ queryKey: ['products'] })

const { mutate, isPending } = useMutation({
    mutationKey: ['products'],
    mutationFn: (data: ProductSchemaType) => createProductAction(data),
    onSettled: async () =>
      await queryClient.invalidateQueries({ queryKey: ['products'] })
  });

Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside `Router`

const variables = useMutationState({
  filters: { mutationKey: ['products'], status: 'pending' },
  select: (mutation) => mutation.state.variables
});

console.log('products', variables);