How to use the @storybook/addon-knobs.optionsKnob function in @storybook/addon-knobs

const getMetaData = () => {
    const queryFormat = getMetaDataQueryFormat();
    const selectedMetaData = options(
      'Metadata',
      metadata,
      [],
      { display: 'check' },
      GROUP_DATA,
    );

    if (!selectedMetaData.length) return undefined;

    return queryFormat === 'string' ? selectedMetaData.join(',') : selectedMetaData;
  };

.add('Special', () => (
    {text('special (prop)', '$100.00')}}
    />
  ))
  .add('Old', () => (

.add("Common", () => ({
    components: { SfSearchBar },
    props: {
      customClass: {
        default: options(
          "CSS modifiers",
          {
            "sf-search-bar--secondary": "sf-search-bar--secondary",
            "sf-search-bar--position-right": "sf-search-bar--position-right",
            "sf-search-bar--position-right-mobile":
              "sf-search-bar--position-right-mobile",
            "sf-search-bar--position-right-desktop":
              "sf-search-bar--position-right-desktop",
            "sf-search-bar--no-icon": "sf-search-bar--no-icon"
          },
          "null",
          { display: "multi-select" },
          "CSS Modifiers"
        )
      },
      placeholder: {

const getBGPrefs = () => {
    const bgUnits = options('BG Units', { [MGDL_UNITS]: MGDL_UNITS, [MMOLL_UNITS]: MMOLL_UNITS, ...noneOption }, MGDL_UNITS, { display: 'select' }, GROUP_UNITS);

    return bgUnits !== 'None' ? {
      bgUnits,
      bgBounds: DEFAULT_BG_BOUNDS[bgUnits],
    } : undefined;
  };

"Subtitle",
          "Dogs in Portland with a net worth greater than $1,000",
          GROUP_IDS.LABELS
        );
        const xLabel = text("X-axis label", "Year", GROUP_IDS.LABELS);
        const xFormatterOptions = getKeyNames(civicFormat);
        const optionSelectX = options(
          "X-axis value format",
          xFormatterOptions,
          "year",
          { display: "select" },
          GROUP_IDS.LABELS
        );
        const yLabel = text("Y-axis label", "Dogs", GROUP_IDS.LABELS);
        const yFormatterOptions = getKeyNames(civicFormat);
        const optionSelectY = options(
          "Y-axis value format",
          yFormatterOptions,
          "numeric",
          { display: "select" },
          GROUP_IDS.LABELS
        );
        const dataKey = text("Data key", "ye", GROUP_IDS.DATA);
        const dataValue = text("Data values", "population", GROUP_IDS.DATA);
        const dataSeries = text("Data series", "breed", GROUP_IDS.DATA);
        const data = object(
          "Data",
          [
            { ye: 1994, population: 2000, breed: "poodle" },
            { ye: 1995, population: 8000, breed: "poodle" },
            { ye: 1995, population: 8000, breed: "poodle" },
            { ye: 1996, population: 6000, breed: "poodle" },

const PATH_MAP_SCALE_TYPE_COLOR_OPTIONS = {
          none: "",
          threshold: "threshold",
          ordinal: "ordinal",
          equal: "equal"
        };

        const lineColor = select(
          "CIVIC Color:",
          CIVIC_COLORS,
          CIVIC_COLORS.civicGreen,
          GROUP_IDS.DESIGN
        );

        const scaleTypeColor = options(
          "Scale Type:",
          PATH_MAP_SCALE_TYPE_COLOR_OPTIONS,
          "",
          {
            display: "inline-radio"
          },
          GROUP_IDS.DESIGN
        );

        const fieldName = text("Field Name:", "shape_leng", GROUP_IDS.DESIGN);

        const dataRange = object("Data Range:", [], GROUP_IDS.DESIGN);

        const colorRange = object("Color Range:", [], GROUP_IDS.DESIGN);

        const pathMapAPIURL =

    const getSortField = t => options(`${t} sort field`, { ...fieldsByType[t], ...noneOption }, 'normalTime', { display: 'select' }, GROUP_SORTS);
    const getSortOrder = t => options(`${t} sort order`, sorts, 'asc', { display: 'select' }, GROUP_SORTS);

display: 'multi-select',
    });

    const valuesCheck = {
      Corn: 'corn',
      Carrot: 'carrot',
      Cucumber: 'cucumber',
    };
    const optionsCheck = options('Check', valuesCheck, ['carrot'], { display: 'check' });

    const valuesInlineCheck = {
      Milk: 'milk',
      Cheese: 'cheese',
      Butter: 'butter',
    };
    const optionsInlineCheck = options('Inline Check', valuesInlineCheck, ['milk'], {
      display: 'inline-check',
    });

    return (
      <div>
        <p>Weekday: {optionRadio}</p>
        <p>Weekend: {optionInlineRadio}</p>
        <p>Month: {optionSelect}</p>
        <p>Fruit:</p>
        <ul>
          {optionsMultiSelect.map(item =&gt; (
            <li>{item}</li>
          ))}
        </ul>
        <p>Vegetables:</p>
        <ul></ul></div>

.add("Common", () => ({
    components: { SfProperty },
    props: {
      customClass: {
        default: options(
          "CSS modifiers",
          {
            "sf-property--full-width": "sf-property--full-width"
          },
          "",
          { display: "multi-select" },
          "CSS Modifiers"
        )
      },
      name: {
        default: text("name", "Material", "Props")
      },
      value: {
        default: text("value", "Cotton", "Props")
      }
    },

POST: "POST",
    PUT: "PUT",
    PATCH: "PATCH",
    DELETE: "DELETE",
    OPTIONS: "OPTIONS",
    HEAD: "HEAD",
    TRACE: "TRACE",
    CONNECT: "CONNECT",
  };
  const defaultValue = ["GET"];
  const optionsObj: OptionsKnobOptions = {
    display: "check",
  };
  const groupId = namespace;

  const methods = optionsKnob(label, valuesObj, defaultValue, optionsObj, groupId);

  const hosts = array("Hosts", ["bookinfo.demo.com"], ",", namespace);
  const schemes = optionsKnob(
    "Schemes",
    { http: "http", https: "https" },
    ["http"],
    {
      display: "check",
    },
    namespace,
  );

  const paths = array("Paths", ["/"], ",", namespace);

  const destinationOptions = [
    { host: "productV1page", weight: 1 },