I have been trying to add the dynamic value to the WebEngage but failed,

    webengage.track("Added To Cart", {
        courseName: "JS Advanced",
        courseType: "A",
        coursePrice: "N/A",
        discount: "N/A",
        pageScroll: "5" // this will be vary between 0 to 100
    });

I am able to track the static values but the dynamic value is not getting tracked on webengage using React js.

Think I had tried till now are:

1. React cleanup function.

    useEffect(() => (window as any).webengage.track("Page Viewed", {...webengageData}), []);

2. JS beforeUnload event.

    useEffect(() => {
        window.addEventListener("beforeUnload", handleWebengge);
        return () => {
          window.removeEventListener("beforeUnload", handleWebengge);
          handleWebengge();
        };
      }, []);
    
      const handleWebengge = () => {
        (window as any).webengage.track("Page Viewed", webengageData);
      };

3. JS unload event

    useEffect(() => {
        window.addEventListener("unload", handleWebengge);
        return () => {
          window.removeEventListener("unload", handleWebengge);
          handleWebengge();
        };
      }, []); 

  const handleWebengge = () => {
    (window as any).webengage.track("Page Viewed", webengageData);
  };

Is there a way when I close or move to other pages I can hit the event and track the event in React.