Link to the first answer question : Problem with reset state function and only than fetching data (React hooks)

My Structure hierarchy of my components: search container --> viewSearchBranches --> profilesSearchOnline

I got a son component called: "profilesSearchOnline".

There i do an event listener to see if a new user got in the site, and if so i add him on the screen.

The problem is when i try to add him, (lets say to an empty list), the variables "profiles" which came from redux store, "remember" the last list was in another page before that. (which usally show 4 users at begining).

So i have a problem, i wanted the list to be an empty (on the first load) -> so i created the func restoreStatesToDefault().

But actually when the son components try to add a new user get in the site, i see he his full with 4 users last page it doesnt really empty because clusters.

I try to do send the variable shouldFetch to the son components which showen to me but it doesnt work.

The error is: this cause an error of Error: Cannot find module './undefined'.

profilesSearchOnline component:

const profiles = useSelector(state => state.profiles); 
const currUser = useSelector(state => state.user);    
const {list} = profiles;


useEffect( ()=> {
     setEventsToUserConnectivity();         
},[profiles]);

    
const setEventsToUserConnectivity = () => {        
     listenToswitchUserToOnlineEvent();
     listenToDisconnectUserEvent();
 }


const listenToswitchUserToOnlineEvent = () => {
    currUser.socket_server.on('user_connect',(profileObj) => {                                            
        if(history.location.pathname == '/search/online' && !isUserAlreadyOnline(profileObj.userId) ){                                
            dispatch(addProfileToList(list,profileObj));  --> here i am adding the "list" which should be empty but actually its full with 4 users already and there is an error.
            setProfilesLoading(null);        
        }                               
    })
}