react-imported-component/dist/es2019/ui/ImportedController.js

I will import your component, and help to handle it

import React, { createContext, useEffect, useState } from 'react';
export const importedState = createContext(undefined);
export const HydrationState = ({ state, children }) => (React.createElement(importedState.Provider, { value: state }, children));
/**
 * @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
 * @param props
 * @param [props.usesHydration=true] determines of Application is rendered using hydrate
 */
export const ImportedController = ({ children, usesHydration = true }) => {
    const [state, setState] = useState({
        usesHydration,
        pastHydration: false,
    });
    useEffect(() => {
        setState((oldState) => ({ ...oldState, pastHydration: true }));
    }, []);
    return React.createElement(HydrationState, { state: state }, children);
};