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

(api: API): void => {
        addons.add(PANEL_ID, {
            title: "FAST DesignSystem",
            type: types.PANEL,
            route: (options: RouteOptions): string => `info/${options.storyId}`,
            match: (options: MatchOptions): boolean => options.viewMode === "info",
            render: (options: RenderOptions) => (
                
            ),
        });
    }
);

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

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

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

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

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

storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
    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
  });
});

addons.register(ADDON_ID, () => {
  addons.add(PANEL_ID, {
    title: 'parameter',
    type: types.PANEL,
    render: ({ active, key }) => (
      
        <content>
      </content>
    ),
  });
});

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

addonAPI.register(ADDON_ID, api => {
  const render = ({ active, key }) => (
    
      
    
  );
  const title = 'Changelog';

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

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