How to use the @remirror/react-utils.cloneElement function in @remirror/react-utils

if (this.rootPropsConfig.called) {
      // Simply return the element as this method can never actually be called
      // within a domless environment
      return element;
    } else if (
      // When called by a provider `getRootProps` can't actually be called until
      // the jsx is generated. Check if this is being rendered via any remirror
      // context provider. In this case `getRootProps` **must** be called by the
      // consumer.
      isRemirrorContextProvider(element) ||
      isRemirrorProvider(element) ||
      isManagedRemirrorProvider(element)
    ) {
      const { childAsRoot } = element.props;
      return childAsRoot
        ? cloneElement(element, props, this.renderClonedElement(children, childAsRoot))
        : element;
    } else {
      return isReactDOMElement(element) ? (
        this.renderClonedElement(element)
      ) : (
        <div>
      );
    }
  }
</div>

export const cloneSSRElement = (
  element: JSX.Element,
  transformChildElements: (
    children: JSX.Element | JSX.Element[],
    childrenProps: PlainObject,
  ) => JSX.Element | JSX.Element[],
) => {
  if (!isReactFragment(element)) {
    throw new Error('Invalid element passed. The top level element must be a fragment');
  }

  const { children } = getElementProps(element);
  const childrenProps = getElementProps(children);

  return cloneElement(element, {}, transformChildElements(children, childrenProps));
};

return Children.map(children, child => {
      if (!(isReactDOMElement(child) && elementIsEmpty(child) && elementIsOfType(child, 'p'))) {
        return child;
      }

      const props = getElementProps(child);
      return cloneElement(child, props, jsx('br'));
    });
  });

private renderClonedElement(element: JSX.Element, rootProps?: GetRootPropsConfig | boolean) {
    const { children, ...rest } = getElementProps(element);
    const props = isPlainObject(rootProps) ? { ...rootProps, ...rest } : rest;

    return cloneElement(element, this.internalGetRootProps(props, this.renderChildren(children)));
  }

export const cloneSSRElement = (
  element: JSX.Element,
  transformChildElements: (
    children: JSX.Element | JSX.Element[],
    childrenProps: PlainObject,
  ) => JSX.Element | JSX.Element[],
) => {
  if (!isReactFragment(element)) {
    throw new Error('Invalid element passed. The top level element must be a fragment');
  }

  const { children } = getElementProps(element);
  const childrenProps = getElementProps(children);

  return cloneElement(element, {}, transformChildElements(children, childrenProps));
};

public ssrTransformer(element: JSX.Element, { getState }: ExtensionManagerParams) {
    const state = getState();
    const { emptyNodeClass, placeholder } = this.options;
    const { children } = getElementProps(element);
    if (Children.count(children) > 1 || !isDocNodeEmpty(state.doc)) {
      return element;
    }

    const props = getElementProps(children);
    return cloneElement(
      element,
      {},
      cloneElement(children, {
        ...props,
        className: isString(props.className) ? `${props.className} ${emptyNodeClass}` : emptyNodeClass,
        'data-placeholder': placeholder,
      }),
    );
  }
}

public ssrTransformer(element: JSX.Element, { getState }: ExtensionManagerParams) {
    const state = getState();
    const { emptyNodeClass, placeholder } = this.options;
    const { children } = getElementProps(element);
    if (Children.count(children) > 1 || !isDocNodeEmpty(state.doc)) {
      return element;
    }

    const props = getElementProps(children);
    return cloneElement(
      element,
      {},
      cloneElement(children, {
        ...props,
        className: isString(props.className) ? `${props.className} ${emptyNodeClass}` : emptyNodeClass,
        'data-placeholder': placeholder,
      }),
    );
  }
}