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

addons.register('i18n', () => {
	const channel = addons.getChannel()
	addons.addPanel('i18n', {
		title: 'language',
		// eslint-disable-next-line react/prop-types
		render: () =>
			React.createElement(() => {
				return (
					
				)
			}),
		paramKey: 'i18n',

addons.register('lucid-docs', api => {
	api.on(STORY_RENDERED, () => {
		const storyData = api.getCurrentStoryData();
		const name = getName(storyData.kind);
		document.title = `${name} - Lucid UI`;
	});

	api.on(DOCS_RENDERED, (title) => {
		const name = getName(title);
		document.title = `${name} - Lucid UI`;
	});

	// Also need to set a unique name to the panel.
	addons.addPanel('lucid-docs-panel-props', {
		title: 'Props',
		render: ({ active }) => (
			
		),
	});
	addons.addPanel('lucid-docs-panel-code', {
		title: 'Code',
		render: ({ active }) => (
			
		),
	});

	addons.getChannel().on('lucid-docs-panel-layout-toggle', () => {
		const urlState = api.getUrlState();
		api.setOptions({
			panelPosition: !urlState.panelRight ? 'right' : 'bottom',

addons.register('responsive-addon', (api) => {
  addons.addPanel('responsive-addon/panel', {
    title: 'Responsive Views',
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
    // eslint-disable-next-line react/display-name
    render: () => ,
  })
})

addons.register('lucid-docs', api => {
  // Also need to set a unique name to the panel.
  /*addons.addPanel('lucid-docs-panel-props', {
		title: 'Props',
		render: () => ,
	}); */

  addons.addPanel('lucid-docs-panel-code', {
    title: 'Code',
    render: () => ,
  });

  /*addons.getChannel().on('lucid-docs-panel-layout-toggle', () => {
		const urlState = api.getUrlState();
		api.setOptions({
			addonPanelInRight: !urlState.panelRight,
		});
	});

	addons.getChannel().on('lucid-docs-panel-hide-toggle', () => {
		const urlState = api.getUrlState();
		api.setOptions({
			showAddonPanel: !urlState.addons,
		});

addonAPI.register(ADDON_CODENAME, storybookAPI => {
  addonAPI.addPanel(`${ADDON_CODENAME}/panel`, {
    title: 'Theme Switcher',
    render: ({active}) => (
      
    ),
  });
});

addons.register(ADDON_ID, api => {
  addons.addPanel(PANEL_ID, {
    title: 'Material-UI',
    render: ({ active, key } = {}) => (
      
    )
  });
});

addons.register(CARBON_TYPE_ADDON_ID, api => {
  addons.addPanel(CARBON_TYPE_PANEL_ID, {
    title: 'Carbon type',
    render: ({ active, key }) => (
      
    ),
  });
});

addons.register('storybook/react-live-edit', (api: *): * => {
    addons.addPanel('storybook/react-live-edit/panel', {
        title: 'Live Edit',
        render({ active, key }: RenderProps = ({ active: true }: any)): ?React.Element {
            return ;
        }
    });
});

addons.register(ADDON_ID, api => {
    addons.addPanel(PANEL_ID, {
      title: 'Events',
      render: ({ active, key }) => ,
      paramKey: PARAM_KEY,
    });
  });
}

addons.register(ADDON_ID, api => {
    const channel = addons.getChannel();
    addons.addPanel(PANEL_ID, {
      title: 'Junction Logger',
      render: ({ active, key }) => (
        
      )
    });
  });
};