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

useProps(_, htmlProps) {
    const color = usePalette("link");
    const anchor = css`
      color: ${color};
      font-weight: 500;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    `;
    return { ...htmlProps, className: cx(anchor, htmlProps.className) };
  }
});

const Anchor = createComponent({
  as: "a",
  useHook: useAnchor,

  useCreateElement(type, { href, ...props }, children) {
    if (href && /^\/(?!\/)/.test(href)) {
      return useCreateElement(Link, { to: href, ...props }, children);
    }
    return useCreateElement(type, { href, ...props }, children);
  }
});

export default Anchor;

}
          strong ~ code {
            color: indianred;
          }
          margin-bottom: 1.5em;
          p {
            margin: 0.5em 0 0;
          }
        }
      }
    `;
    return { ...htmlProps, className: cx(list, htmlProps.className) };
  }
});

const List = createComponent({
  as: "ul",
  useHook: useList
});

export default List;

margin: 1em;
        text-align: center;
        z-index: 999;
      }
    `;
    return {
      tabIndex: 0,
      children: "Skip to main content",
      href: "#main",
      ...htmlProps,
      className: cx(skipToContent, htmlProps.className)
    };
  }
});

const SkipToContent = createComponent({
  as: "a",
  useHook: useSkipToContent
});

export default SkipToContent;

...htmlProps,
        children: isExperimental ? (
          <>
            
            <div>{htmlProps.children}</div>
          
        ) : (
          htmlProps.children
        ),
        className: cx(blockquote, htmlProps.className)
      };
    }
  }
);

const Blockquote = createComponent({
  as: "blockquote",
  useHook: useBlockquote
});

export default Blockquote;

@media (max-width: 768px) {
          font-size: 1.25em;
        }
      }
      h4& {
        font-size: 1.25em;
        @media (max-width: 768px) {
          font-size: 1em;
        }
      }
    `;
    return { ...htmlProps, className: cx(heading, htmlProps.className) };
  }
});

const Heading = createComponent({
  as: "h1",
  useHook: useHeading
});

export default Heading;

export type ParagraphHTMLProps = BoxHTMLProps;
export type ParagraphProps = ParagraphOptions & ParagraphHTMLProps;

export const useParagraph = createHook({
  name: "Paragraph",
  compose: useBox,

  useProps(_, htmlProps) {
    const paragraph = css`
      line-height: 1.5;
    `;
    return { ...htmlProps, className: cx(paragraph, htmlProps.className) };
  }
});

const Paragraph = createComponent({
  as: "p",
  useHook: useParagraph
});

export default Paragraph;

border-radius: 0.25em;
      font-family: Consolas, Liberation Mono, Menlo, Courier, monospace;
      background-color: ${backgroundColor};
      padding: 0.3em 0.5em 0.25em;
      border: 1px solid ${borderColor};
      border-width: 1px 1px 2px 1px;
      font-size: 0.875em;
    `;
    return {
      ...htmlProps,
      className: cx(keyboardInput, htmlProps.className)
    };
  }
});

const KeyboardInput = createComponent({
  as: "kbd",
  useHook: useKeyboardInput
});

export default KeyboardInput;

useProps(options, htmlProps) {
    const hiddenMediaQuery = css`
      @media (${options.query}) {
        display: none !important;
      }
    `;

    return {
      ...htmlProps,
      className: cx(hiddenMediaQuery, htmlProps.className)
    };
  }
});

const HiddenMediaQuery = createComponent({
  as: "div",
  useHook: useHiddenMediaQuery
});

export default HiddenMediaQuery;