React Query Update Cached Data By Index Key

How do I update existing records by their index key?

Im not so familiar with React Query.

When a button is clicked, then this will trigger onClickHandler to update the object value by its index key.

import {useQuery, useQueryClient} from '@tanstack/react-query';

const {
  data: comments,
  isError,
  isLoading
} = useQuery({
      queryKey: ['comments'],
      queryFn: async () => {
         const response = await fetch(`https://jsonplaceholder.typicode.com/posts/1/comments`);
         return response.json();
      }
});

const onClickHandler = (index) => {
   const previousData = queryClient.getQueriesData(['comments']);

   queryClient.setQueryData(['comments'], (comments) => {

      comments.map((r, i) => {

         r['is_shown'] = false;
       
         if(i === index) {
            r['is_shown'] = true;
         }

         return r;

      });

   });
};