How to use the @storybook/addons.add function in @storybook/addons

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

addons.register(ID, api =>
  addons.add(ID, {
    title: ID,
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
    render: () => createElement(ContextsManager, { api }),
  })
);

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 })
  })
})

addons.register(ADDON_ID, api => {
  addons.add(ADDON_ID, {
    title: 'viewport / media-queries',
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
    render: () => ,
  });
});

dangerouslySetInnerHTML: { __html: html },
        }),
        e('div', {
          key: uuidv4(),
          dangerouslySetInnerHTML: { __html: '<h3>Code Snipped</h3>' },
        }),
        e('pre', {
          key: uuidv4()
        }, e('code', { key: uuidv4() }, template)),
      ]
    }
  };

  const render = () =&gt; e(Wrapper, { key: uuidv4() });

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

addons.register(ADDON_ID, api => {
  addons.add(PANEL_ID, {
    type: types.PANEL,
    title: 'Theme',
    render: props => 
  })
})

addons.register(ADDON_ID, api => {
    addons.add(PANEL_ID, {
      title: PANEL_Title,
      type,
      id: PANEL_ID,
      render: ({ active, key } = {}) => (
        
      ),
    });
  });
};

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