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

export function PlaygroundPreview({
  code,
  modules,
  update,
  componentName,
  ...htmlProps
}: PlaygroundPreviewOptions & PlaygroundPreviewHTMLProps) {
  const options = useOptions(
    "PlaygroundPreview",
    { code, modules, componentName },
    htmlProps
  );

  const ref = React.useRef(null);
  const { id: prefix } = useId({ baseId: "preview" });
  const [error, setError] = React.useState(null);

  const handleError = React.useCallback((e: Error) => {
    setError(e);
    console.error(e); // eslint-disable-line no-console
  }, []);

  const [rendered, setRendered] = React.useState(() => {
    try {

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>;
}

export function PlaygroundEditor({
  code,
  update,
  readOnly,
  lineWrapping,
  theme = "reakit",
  tabSize = 2,
  mode = "jsx",
  autoRefresh,
  maxHeight,
  ...htmlProps
}: PlaygroundEditorOptions & PlaygroundEditorHTMLProps) {
  const options = useOptions(
    "PlaygroundEditor",
    {
      code,
      update,
      readOnly,
      lineWrapping,
      theme,
      tabSize,
      mode,
      autoRefresh,
      maxHeight
    },
    htmlProps
  );

  const [enabled, setEnabled] = React.useState(false);