How to use the docz.useComponents function in docz

const Route = ({ children, entry, ...defaultProps }) => {
  const components = useComponents()
  const NotFound = components.notFound
  const Layout = components.layout
  const props = { ...defaultProps, doc: entry }
  if (!entry) return 
  return (
    
      {children}
    
  )
}

export const PropsTable: React.SFC = ({
  props,
  getPropType,
}) => {
  const entries = Object.entries(props)
  const components = useComponents()
  const Paragraph = useMemo(
    () => styled(components.P || 'p')`
      margin: 0;
      font-size: 16px;
      color: ${get('colors.blockquoteColor')};
      padding: 0 15px 8px 15px;
    `,
    []
  )

  return (
    
      {entries.map(([key, prop]) => {
        if (!prop.type && !prop.flowType) return null
        return (

export const PropsRaw: React.SFC = ({
  props,
  getPropType,
}) => {
  const entries = Object.entries(props)
  const components = useComponents()
  const Paragraph = useMemo(
    () => styled(components.P || 'p')`
      font-size: 16px;
      color: ${get('colors.sidebarText')};
    `,
    []
  )

  return (
    
      {entries.map(([key, prop]) => {
        if (!prop.type && !prop.flowType) return null
        return (
          
            <title>
              &lt;PropName&gt;{key}&lt;/PropName&gt;</title>

export const Props = ({ title, isToggle, isRaw, of: component }) => {
  const components = useComponents();
  const { props: stateProps } = React.useContext(doczState.context);
  const PropsComponent = components.props;
  const filename = get('__filemeta.filename', component);
  const filemetaName = get('__filemeta.name', component);
  const componentName = filemetaName || component.displayName || component.name;
  const found =
    stateProps &&
    stateProps.length > 0 &&
    stateProps.find(item =>
      filename ? item.key === filename : item.key.includes(`${componentName}.`)
    );

  const value = get('value', found) || [];
  const firstDefinition = first(value);
  const definition = value.find(i => i.displayName === componentName);

export const Props: React.SFC = ({
  title,
  isRaw,
  isToggle,
  ...props
}) => {
  const [isOpen, setIsOpen] = useState(true)

  const components = useComponents()
  const Title = useMemo(
    () => styled(components.H3 || 'h3')`
      padding: 8px 0;
      position: relative;
      ${!isRaw ? 'margin-bottom: 0;' : ''}
      ${!isOpen || isRaw ? 'border-bottom: 1px solid rgba(0, 0, 0, 0.1);' : ''}

      ${
        isToggle
          ? `
        cursor: pointer;
        padding-right: 40px;

        &::after {
          content: '';
          position: absolute;

const Route = ({ children, ...props }) => {
  const components = useComponents()
  const NotFound = components.NotFound
  if (!props.entry) return 

  return (
    
       {children}}
      />
    
  )
}