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

addons.register('formol_themes', api => {
  addons.addPanel('formol_themes/panel', {
    type: types.PANEL,
    title: 'Formol Themes',
    // eslint-disable-next-line react/display-name
    render: ({ active, key }) => ,
  })
})

addons.register(ADDON_ID, api => {
  addons.add(PANEL_ID, {
    type: types.TOOL,
    title: 'Coverage',
    match: ({ viewMode }) => viewMode === 'story', // todo add type
    render: () => ,
  });

  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'Coverage',
    match: ({ viewMode }) => viewMode === 'story', // todo add type
    render: ({ active, key }) => (
      
        
      
    ),
    paramKey: PARAM_KEY,
  });
});

addons.register(ADDON_ID, () => {
    const render = ({ active, key }) =>
        React.createElement(
            AddonPanel,
            { active, key },
            React.createElement(SourcePanel, { active })
        );

    addons.add(PANEL_ID, {
        type: types.PANEL,
        title: 'Source',
        render,
        paramKey: PARAM_KEY,
    });
});

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

export const register = (storeSelectors, createActions) => (
  Panel,
  { type = addonTypes.PANEL, initData } = {}
) => {
  const config = getConfig();
  const {
    EVENT_ID_INIT,
    EVENT_ID_DATA,
    EVENT_ID_BACK,
    ADDON_ID,
    PANEL_Title,
    PANEL_ID,
  } = config;

  const WithChannel = withChannel({
    EVENT_ID_INIT,
    EVENT_ID_DATA,
    EVENT_ID_BACK,
    ADDON_ID,

addons.register(ADDON_ID, api => {
  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,
  });
});

if (storybookAPI.getUrlState().path === '/story/*') {
      storybookAPI.selectStory('mgt-login', 'login');
    }
  });
  storybookAPI.on(STORY_MISSING, (kind, story) => {
    storybookAPI.selectStory('mgt-login', 'login');
  });

  const render = ({ active, key }) => (
    
      
    
  );

  addons.add('mgt/sign-in', {
    type: types.PANEL,
    title: 'Sign In',
    render,
    paramKey: PARAM_KEY
  });
});

get panels() {
        return this.getElements(types.PANEL);
      },

addons.register('storybook/props', api => {
  addons.add('storybook/props/panel', {
    title: 'Info',
    type: types.PANEL,
    render: ({ active, key }) => (
      
    ),
  });
});

addons.register(ADDON_ID, () => {
  const channel = addons.getChannel()

  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'Markup',
    render: ({ active, key }) => createElement(MarkupPanel, { active, key, channel })
  })
})