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

const SignInPanel = () => {
  const value = useParameter(PARAM_KEY, null);

  const [state, setState] = useState(Providers.globalProvider.state);

  const emit = useChannel({
    STORY_RENDERED: id => {
      console.log('storyRendered', id);
    },
    [GETPROVIDER_EVENT]: params => {
      emitProvider(state);
    }
  });

  const emitProvider = loginState => {
    emit(SETPROVIDER_EVENT, { state: loginState });
  };

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

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 (

export const Content = () => {
  const results = useParameter(PARAM_KEY, []);

  return useMemo(
    () =>
      results.length ? (
        <ol>
          {results.map((i: string) =&gt; (
            <li>{i}</li>
          ))}
        </ol>
      ) : null,
    [results]
  );
};

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 =

const SourcePanel = ({ active }) => {
    const source = useParameter(PARAM_KEY, null);
    return active && source
        ? React.createElement(
              SyntaxHighlighter,
              {
                  language: 'html',
                  showLineNumbers: false,
                  copyable: true,
                  padded: true,
                  format: false,
              },
              source
          )
        : null;
};

const MyPanel = () => {
  const value = useParameter('changelog', null);

  const replaceUnneeded = (value) => {
    if (value) {
      return value
        .replace('module.exports = "', '')
        .replace(/\\n";/g, '<br>')
        .replace(/\\n/g, '<br>');
    }
    return 'No Changelog found.';
  };

  return <div style="{{"></div>;
};