How to use the @shopify/react-html.useSerialized function in @shopify/react-html

({value: explicitValue, children}: UniversalProviderProps) => {
      const [value = explicitValue, Serialize] = useSerialized(id);

      if (value == null) {
        throw new Error(
          `You must provide a ${id} value, or have one previously serialized.`,
        );
      }

      return (
        <>
          {children}
           value} />
        
      );
    },
  );

export function I18n({children, ...givenI18nDetails}: Props) {
  const [serialized, Serialize] = useSerialized('i18n');

  const i18nDetails: I18nDetails = {
    locale: givenI18nDetails.fallbackLocale || 'en',
    ...givenI18nDetails,
    ...(serialized ? serialized.i18nDetails : {}),
  };

  const manager = useRef(
    new I18nManager(
      i18nDetails,
      serialized ? serialized.translations : undefined,
    ),
  );

  useHtmlAttributes({lang: i18nDetails.locale});

export function GraphQLUniversalProvider({
  children,
  createClientOptions,
}: Props) {
  const [initialData, Serialize] = useSerialized('apollo');

  const [client, link] = useLazyRef<
    [
      import('apollo-client').ApolloClient,
      ReturnType
    ]
  >(() => {
    const clientOptions = createClientOptions();
    const link = createSsrExtractableLink();

    const apolloClient = new ApolloClient({
      ...clientOptions,
      link: clientOptions.link ? link.concat(clientOptions.link) : link,
      cache: initialData
        ? clientOptions.cache.restore(initialData)
        : clientOptions.cache,

export function I18nUniversalProvider({
  children,
  ...explicitI18nDetails
}: Props) {
  const [serialized, Serialize] = useSerialized('i18n');

  const i18nDetails: I18nDetails = {
    locale: explicitI18nDetails.fallbackLocale || 'en',
    ...(serialized ? serialized : {}),
    ...explicitI18nDetails,
  };

  const manager = useLazyRef(
    () =>
      new I18nManager(
        i18nDetails,
        serialized ? serialized.translations : undefined,
      ),
  ).current;

  useHtmlAttributes({lang: i18nDetails.locale});

export function GraphQL({children, createClient}: Props) {
  const [initialData, Serialize] = useSerialized('apollo');

  const [client, link] = useLazyRef<
    [
      import('apollo-client').ApolloClient,
      ReturnType
    ]
  >(() => {
    const link = createSsrExtractableLink();
    const client = createClient();
    client.link = link.concat(client.link);

    if (initialData) {
      client.cache = client.cache.restore(initialData);
    }

    return [client, link];