Sending data in my chrome extension from content to react app

Question

I made a chrome extension that tracks my activity on a web page. I'm doing that through some jQuery code in my content.js file I'm saving all those activities in an array. Now i'm trying to communicate my content.js with the react app. I'm trying to do that through listeners. this is what I did : I created a state and a function that posts a message first

const [arrActivities, setArrActivities] = useState();

  function getArrActivities() {
    window.postMessage({ type: "GET_ARR_ACTIVITIES" }, "*");
  }

this is what I did in the content.js file :

window.addEventListener("GET_ARR_ACTIVITIES", function(event) {
  if (event.source !== window) return;
  onDidReceiveMessage(event);
});

async function onDidReceiveMessage(event) {
  if (event.data.type && (event.data.type === "GET_ARR_ACTIVITIES")) {
    window.postMessage({ type: "ArrActivities", arrActivities: clickactivities }, "*");
  }
}

then I did this in the useEffect in my ModalProdvider since I'm using context API :

window.addEventListener("arrActivities", function(event) {
      if (event.source !== window) return;
      if (event.data.type && (event.data.type === "ArrActivities")) {
        console.log("done");
        setTabActivities(event.data.arrActivities);
      }
    });

But for some reason nothing is happening. is there something wrong with my code ? I appreciate your help guys.