How to invalidate useQuery cache from another component?

I have a parent component which needs to invalidate the query cache of a child component:

const Child = () => {    const { data } = useQuery('queryKey', () => fetch('something'))    return <Text>{data}</Text>}const Parent = () => {    const queryClient = useQueryClient()    useEffect(() => {        console.log('Clean up happened')        return () => queryClient.invalidateQueries(['queryKey'])    })    return <Child />}

I can see that Clean up happpened is logged out, but the query cache for queryKey is not invalidated.

Is there something wrong with how I am using #invalidateQueries? Or that query cache of a component (Child) cannot be invalidated by another component (Parent)