React Query invalidateQueries updating data after post

I'm working on a simple React CRUD with React Query, and I've being stuck for a while trying to update my fetched data after I post a new item with invalidateQueries but it doesn't work, being trying many things like: onSuccess, onMutate, onSettled, etc etc, and nothing seems to work, also following the React Query Documentation. Here is my code:

const queryClient = useQueryClient();

const handleSubmitButtonNew = async (data) => {
    api.createAnnouncements(data);
  };

  const mutation = useMutation(handleSubmitButtonNew, {
    onSuccess: () => {
      queryClient.invalidateQueries("Announcements");
    },
  });

  const { data, status, isLoading } = useQuery(
    "Announcements",
    api.getAnnouncements
  );

and then in a child component I call:

mutation.mutate({ title: title.value, content: content.value, user });

Can I call the queryClient.invalidateQueries("Announcements"); from another component where the "Announcements" originally is fetching?

What I'm doing wrong ?