How to use the reakit-system.useProps function in reakit-system

return () => clearTimeout(timer);
  }, [
    options.code,
    options.modules,
    options.componentName,
    renderChildren,
    handleError,
    unmount
  ]);

  React.useEffect(() => {
    // Ensure that we unmount the React component when the effect is destroyed.
    return () => unmount();
  }, [unmount]);

  htmlProps = useProps("PlaygroundPreview", options, htmlProps);

  return (
    
      <div>
        {error &amp;&amp; }
        <div>{renderChildren(rendered)}</div>
      </div>
    
  );
}

export function ErrorMessage({
  error,
  unstable_system,
  ...htmlProps
}: ErrorMessageOptions & ErrorMessageHTMLProps) {
  const options = useOptions(
    "ErrorMessage",
    { error, unstable_system },
    htmlProps
  );

  htmlProps = useProps("ErrorMessage", options, htmlProps);
  htmlProps = useBox(options, htmlProps);

  return <pre>{options.error.toString()}</pre>;
}

theme,
      tabSize,
      mode,
      autoRefresh,
      maxHeight
    },
    htmlProps
  );

  const [enabled, setEnabled] = React.useState(false);
  const enabledRef = useLiveRef(enabled);
  const _readOnly =
    typeof options.readOnly !== "undefined" ? options.readOnly : !enabled;
  const [ready, setReady] = React.useState(false);

  htmlProps = useProps(
    "PlaygroundEditor",
    { ...options, readOnly: _readOnly },
    htmlProps
  );

  const className = [
    htmlProps.className,
    !enabled && !options.readOnly && "disabled"
  ]
    .filter(Boolean)
    .join(" ");

  React.useEffect(() => {
    const id = requestAnimationFrame(() => setReady(true));
    return () => cancelAnimationFrame(id);
  }, []);