How to use the react-live.withLive function in react-live

import React from 'react';
import { withLive } from 'react-live';

import { Box, Text } from 'grommet';

const PlaygroundError = withLive(({ error }) => {
  if (!error) {
    return null;
  }
  return (
    
      
    
  );
});

export { PlaygroundError };

language: string
  theme: PrismTheme
  onChange: () => void
  onError: () => void
}

interface WithLiveProps {
  children: (error?: string) => ReactNode
  live?: LiveProps
}

const LivePreviewWrapper = styled.div`
  position: relative;
`

export const LiveConsumer = withLive(({ children, live }) => {
  return <>{children((live as LiveProps).error)}
})

interface ActionProps {
  editorIsVisible: boolean
}

interface CopyButtonProps extends ActionProps {
  code: string
}

export const CopyButton: FC = ({ code, editorIsVisible }) => {
  return (
    
      {(eventHandlers, ref) => (

)}
          
          {codeOpen && }
          {live && }
        
      
    );
  }
}

LiveDemo.propTypes = propTypes;
LiveDemo.defaultProps = defaultProps;

export default withLive(LiveDemo);

import React from 'react';
import { withLive } from 'react-live';

import { Box, Heading } from 'grommet';
import { Gremlin } from '../Gremlin';

const PlaygroundPlaceholder = withLive(({ error }) => {
  if (!error) {
    return null;
  }
  return (
    
      Oh, no!
      
        Something went wrong, check your code...

\`
`).trim()

import {
  BloombergLogo,
  AtlassianLogo,
  RedditLogo,
  TargetLogo,
  EuroVisionLogo,
  ArtsyLogo,
  IdeaLogo,
  HuffpostLogo,
  CoinbaseLogo,
} from '../components/CompanyLogos'

const HomepageLivePreview = withLive(({
  live: { element: Button = FallbackButton },
  className,
  ...rest
}) => {
  const LiveButton = Button.extend.withConfig({ componentId: 'LiveButton' })``
  const LiveInternalButton = Button.withComponent(Link).extend.withConfig({ componentId: 'LiveInternalButton' })``

  return (
    <div>
      </div>

);
  }
}

const prettierComment = /(\{\s*\/\*\s+prettier-ignore\s+\*\/\s*\})|(\/\/\s+prettier-ignore)/gim;

const { background, foreground } = css`
  @import '../css/theme';

  :export {
    background: $lighter;
    foreground: $subtleOnDark;
  }
`;

const Preview = withLive(
  class extends React.Component {
    constructor() {
      super();

      this.example = null;
    }

    componentDidMount() {
      import('holderjs').then(({ default: hjs }) => {
        this.hjs = hjs;
        hjs.addTheme('gray', {
          bg: background,
          fg: foreground,
          font: 'Helvetica',
          fontweight: 'normal',
        });