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

getElements: type =>
    type === types.TAB
      ? [
          {
            id: 'notes',
            type: types.TAB,
            title: 'Notes',
            route: ({ storyId }) => `/info/${storyId}`, // todo add type
            match: ({ viewMode }) => viewMode === 'info', // todo add type
            render: () => null,
          },
        ]
      : [],
  options: {

getElements: type =>
    type === types.TAB
      ? [
          {
            id: 'notes',
            type: types.TAB,
            title: 'Notes',
            route: ({ storyId }) => `/info/${storyId}`, // todo add type
            match: ({ viewMode }) => viewMode === 'info', // todo add type
            render: () => null,
          },
        ]
      : [],
  options: {

addons.register(ADDON_ID, api => {
  addons.add(PANEL_ID, {
    type: types.TAB,
    title: 'Docs',
    route: ({ storyId }) => `/docs/${storyId}`, // todo add type
    match: ({ viewMode }) => viewMode === 'docs', // todo add type
    render: ({ active }) => null,
    // render: ({ active }) => ,
  });
});

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

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,
                customCanvas,

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    type: types.TAB,
    title: 'Docs',
    route: ({ storyId }) => `/docs/${storyId}`,
    match: ({ viewMode }) => viewMode === 'docs',
    render: () => null,
  });
});

addons.register(ADDON_ID, () => {
    addons.add(ADDON_ID, {
      title: 'GraphiQL',
      type: types.TAB,
      route: ({ storyId }) => `/graphql/${storyId}`,
      match: ({ viewMode }) => viewMode === 'graphql',
      render: GQL,
    });
  });
}

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',
      },
    ]);