How to unmount component with updated context value?

Question

So I have a parent component that would be the dashboard that displays conditionally a child component that subscribes to a websocket service. When the user completes a form inside of the child component the data is set to the ws service and I get a response and the user is "connected" to the ws, thus far everything works fine. The problem I have is that if the user starts the connection and then navigates to another page (like the profile page) the ws connection doesn't stop and the user still appears as connected.

I've been using useEffect to handle unmounting components but I get a problem with it. In order to unsubcribe from the ws I need the stompClient (from stompjs that renders the ws) and the data object (the data I send to the ws which contains info from user) and I save these objects in a context to use them globally.

This is the parent component where I need to disconnect the ws.

import { useStateProfConsultFilterValue } from '../../../context/profConsultFilterState';

...
   const [{stomp, data}, dispatch] = useStateProfConsultFilterValue();

 useEffect(()=>{
    return () => {console.log(data};
  },[]);

But when it unmounts I get an empty array (which is the default value from the context. If I listen to changes in useEffect I get the updated value from the child component but I fires every time the data changes and I need it to run only when the component unmounts.

import { useStateProfConsultFilterValue } from '../../../context/profConsultFilterState';

...
   const [{stomp, data}, dispatch] = useStateProfConsultFilterValue();

 useEffect(()=>{
    return () => {console.log(data};
  },[data]);
  /// fires multiple times when data changes 

I can't handle it from the child component because based on the value I get from the ws it unmounts and mounts constantly. I tried having two useEffects, one for storing the data in a local state every time it changes and another that logs that local state on unmount, but I get the same resutl. I also tried passing a function to and from the child component with the values but it doesn't work.

How can I get the updated context state on the parent component? Or how can I get it to log the correct data only once when the component unmounts?