How to use the @storybook/api.useAddonState function in @storybook/api

export const CoveragePanel: React.FC<{}> = () => {
  const [coverageSummary, setCoverageSummary] = useAddonState(ADDON_ID, null);
  const [coverageDetail, setCoverageDetail] = useAddonState(ADDON_ID, null);
  useChannel({
    [EVENTS.COVERAGE_DETAIL]: (detail: CoverageDetail) => setCoverageDetail(detail),
  });
  // console.log('panel', { coverage });
  // return coverageSummary ?  : <div>No coverage</div>;
  return coverageDetail ?  : <div>No coverage</div>;
};

export const Panel = () => {
  const [results, setState] = useAddonState(ADDON_ID, []);
  const emit = useChannel({
    [EVENTS.RESULT]: (newResults: Results) => setState(newResults),
  });

  return (
    
      <content>
       emit(EVENTS.REQUEST) },
          { title: 'setState', onClick: () =&gt; setState(['foo']) },
          {
            title: 'setState with options',
            onClick: () =&gt; setState(['bar'], { persistence: 'session' }),
          },</content>

const ViewportTool = () => {
  const [role, setRole] = useAddonState(ADDON_ID, 'myra_range_officer')

  const emit = useChannel({
    [STORY_RENDERED]: () => {
      setTimeout(() => {
        emit('role/change', role)
      }, 100)
    }
  })

  const handleChange = e => {
    setRole(e.target.value)
    emit('role/change', e.target.value)
  }

  return (

withTheme(({ theme }: { theme: Theme }) => {
    const {
      viewports = MINIMAL_VIEWPORTS,
      defaultViewport = responsiveViewport.id,
      disable,
    } = useParameter(PARAM_KEY, {});
    const [state, setState] = useAddonState(ADDON_ID, {
      selected: defaultViewport,
      isRotated: false,
    });
    const list = toList(viewports);

    useEffect(() => {
      setState({
        selected:
          defaultViewport || (viewports[state.selected] ? state.selected : responsiveViewport.id),
        isRotated: state.isRotated,
      });
    }, [defaultViewport]);

    const { selected, isRotated } = state;
    const item =
      list.find(i => i.id === selected) ||

withTheme(({ theme }: { theme: Theme }) => {
    const { viewports, defaultViewport, disable } = useParameter(
      PARAM_KEY,
      {
        viewports: {},
        defaultViewport: responsiveViewport.id,
      }
    );
    const [state, setState] = useAddonState(ADDON_ID, {
      selected: defaultViewport || responsiveViewport.id,
      isRotated: false,
    });
    const list = toList(viewports);

    const { selected, isRotated } = state;
    const item =
      list.find(i => i.id === selected) ||
      list.find(i => i.id === defaultViewport) ||
      list.find(i => i.default) ||
      responsiveViewport;

    const ref = useRef();

    const styles = getStyles(ref.current, item.styles, isRotated);

export const Panel = () => {
  const results = useParameter(PARAM_KEY, []);
  const [selected, setSelected] = useAddonState(ADDON_ID, 0);
  const { storyId } = useStorybookState();

  return useMemo(() => {
    if (results.length === 0) {
      return null;
    }

    if (results.length && !results[selected]) {
      setSelected(0);
      return null;
    }
    const url = getUrl(results[selected]).replace('{id}', storyId);
    return (
      
        
        {results.length > 1 ? (

export const useEditor = () => {
  const [addonState, setAddonState] = useAddonState(ADDON_NAME, {});

  const setAddonStateFunc = (newSource: string, storyId: string) => {
    setAddonState({
      ...addonState,
      [storyId]: newSource.trimLeft(),
    });
  };

  return [addonState, setAddonStateFunc] as [
    Record,
    (newSource: string, storyId: string) => void
  ];
};