fix(react-router): use state to track IonRouterOutlet ref id in test

packages/react-router/test/base/src/pages/outlet-ref/OutletRef.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import {
   IonRouterOutlet,
   IonPage,
@@ -13,16 +13,20 @@ interface OutletRefProps {}
 
 export const OutletRef: React.FC<OutletRefProps> = () => {
   const ref = useRef<HTMLIonRouterOutletElement>(null);
+  const [outletId, setOutletId] = useState<string | undefined>(undefined);
 
   useEffect(() => {
-    console.log(ref);
+    // Update the outlet id once the ref is populated
+    if (ref.current?.id) {
+      setOutletId(ref.current.id);
+    }
   }, []);
 
   return (
     <IonRouterOutlet id="main-outlet" ref={ref}>
       <Route
         path="/outlet-ref"
-        element={<Main outletId={ref.current?.id} />}
+        element={<Main outletId={outletId} />}
       />
     </IonRouterOutlet>
   );