Having problem in wrapping custom hooks with React component

This is my code:- const App = () => { return ( <Router> <Routes> <Route element={<RoomGuard />}> <Route path="profiles" element={ <AuthGuard> <LoggedInUser> <Profiles /> </LoggedInUser> </AuthGuard> } ></Routes> </Route> </Routes> </Suspense> </Router> </Provider> ); }; export default App; this is roomGuard component:- import React, { useEffect, useMemo } from 'react' import { io } from "socket.io-client"; const RoomGuard = ({children}) => { const socket = useMemo(() => io("http://localhost:5000"), []); useEffect(()=>{ return () => { socket.disconnect(); }; },[]) return ( <div> {React.Children.map(children, child => { return React.cloneElement(child, { socket }); })} </div> ) } export default RoomGuard what I am trying to do is make a custom component that generate the socket and pass it to all component so that every component can use the socket but somehow it is not working. WHen I go to the path mention in url of router, the compoent doesn't render what is issue here