fix: use only one childlren in ImportedController to keep tree flat

src/ui/ImportedController.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useEffect, useState } from 'react';
+import React, { createContext, useEffect, useState } from 'react';
 
 interface ImportedState {
   usesHydration: boolean;
@@ -11,15 +11,6 @@ export const HydrationState: React.FC<{ state: ImportedState }> = ({ state, chil
   <importedState.Provider value={state}>{children}</importedState.Provider>
 );
 
-/**
- * this component just creates a "the first-most" effect in the system
- */
-const HydrationEffect = ({ loopCallback }: { loopCallback(): void }): null => {
-  useEffect(loopCallback, []);
-
-  return null;
-};
-
 /**
  * @see [LazyBoundary]{@link LazyBoundary} - HydrationController is required for LazyBoundary to properly work with React>16.10
  * Established a control over LazyBoundary suppressing fallback during the initial hydration
@@ -37,12 +28,9 @@ export const ImportedController: React.FC<{
     pastHydration: false,
   });
 
-  const onFirstHydration = useCallback(() => setState((oldState) => ({ ...oldState, pastHydration: true })), []);
+  useEffect(() => {
+    setState((oldState) => ({ ...oldState, pastHydration: true }));
+  }, []);
 
-  return (
-    <>
-      <HydrationEffect loopCallback={onFirstHydration} />
-      <HydrationState state={state}>{children}</HydrationState>
-    </>
-  );
+  return <HydrationState state={state}>{children}</HydrationState>;
 };