How to use the @storybook/addons.types.PREVIEW function in @storybook/addons

addons.add(PANEL_ID, {
    title: '',
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
    render: () => ,
  });

  addons.add(PANEL_ID, {
    title: 'Accessibility',
    type: types.PANEL,
    render: ({ active, key }) => ,
  });

  addons.add(PANEL_ID, {
    title: '',
    type: types.PREVIEW,
    render: PreviewWrapper as any,
  });
});

title: '',
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
    render: () => ,
  });

  addons.add(PANEL_ID, {
    title: 'Accessibility',
    type: types.PANEL,
    render: ({ active, key }) => ,
    paramKey: PARAM_KEY,
  });

  addons.add(PANEL_ID, {
    title: '',
    type: types.PREVIEW,
    render: PreviewWrapper as any,
  });
});

const {
      id,
      path,
      location,
      viewMode,
      storyId,
      getElements,
      actions,
      options,
      description,
      baseUrl,
    } = this.props;

    const toolbarHeight = options.isToolshown ? 40 : 0;

    const wrappers = getElementList(getElements, types.PREVIEW, defaultWrappers);
    const panels = getElementList(getElements, types.TAB, [
      {
        route: p => `/story/${p.storyId}`,
        match: p => p.viewMode === 'story',
        render: p => (
          
        ),
        title: 'Canvas',
        id: 'canvas',
      },

path,
      location,
      viewMode,
      docsOnly,
      storyId,
      queryParams,
      getElements,
      api,
      customCanvas,
      options,
      description,
      baseUrl,
    } = this.props;

    const toolbarHeight = options.isToolshown ? 40 : 0;
    const wrappers = getElementList(getElements, types.PREVIEW, defaultWrappers);
    const panels = getElementList(getElements, types.TAB, [
      {
        route: p => `/story/${p.storyId}`,
        match: p => p.viewMode && p.viewMode.match(/^(story|docs)$/),
        render: p => (
          
            {({ value }) => {
              const props = {
                viewMode,
                active: p.active,
                wrappers,
                id,
                storyId,
                baseUrl,
                queryParams,
                scale: value,

path,
      location,
      viewMode = 'story',
      storyId = '',
      queryParams,
      getElements,
      api,
      customCanvas,
      options,
      description,
      frames = {},
      story,
    }: PreviewProps = this.props;
    const currentUrl = story && getUrl(story);
    const toolbarHeight = options.isToolshown ? 40 : 0;
    const wrappers = getElementList(getElements, types.PREVIEW, defaultWrappers);
    const panels = getElementList(getElements, types.TAB, [
      {
        route: (p: { storyId: string }) => `/story/${p.storyId}`,
        match: (p: { viewMode: ViewMode }) => p.viewMode && p.viewMode.match(/^(story|docs)$/),
        render: (p: { viewMode: ViewMode; active: boolean }) => (
          
            {({ value }) => {
              const props = {
                viewMode,
                active: p.active,
                wrappers,
                storyId,
                queryParams,
                scale: value,
                customCanvas,
              };