How to modify existing cache data?

const trpcUtils = api.useContext();
const session = useSession();
const createNewMessage = api.msg.create.useMutation({ // called in a client component w/appropriate data...
  onSuccess: (newMsg) => {
    if (session.status !== "authenticated") return; // clears @TS-error for getting id below 👌🤷  
/*** --- ❓ use `setInfiniteData()?` ❓  --- ***/   
// ❌❌❌ The `cachedData` argument throws crazy recursive TS errors ❌❌❌
     trpcUtils.msgs.infiniteFeed.setInfiniteData( {}, (cachedData) => {  // ❌❌❌
       // nothing in first arg because I only want to change existing data?
       if (!cachedData) { return { pages: [], pageParams: [] }; }

       const newMsgDataForDisplay = {...newMsg, user: {id: session.data.user.id } };
       const pages = cachedData.pages;
       const firstPage = pages[0];
       const laterPages = pages.slice(1);
       const firstPageMessageQueue = firstPage?.messageQueue.slice() ?? [];

       return { 
          ...cachedData,
          pages: [{ ...firstPage
                    messageQueue: [newMsgDataForDisplay, ...firstPageMessageQueue],
                  },
                  ...laterPages ]
        };
      });
    }
  })