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

// General
    const name = text('Name', 'Storyteller', GROUP_IDS.GENERAL);
    const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }, GROUP_IDS.GENERAL);
    const birthday = date('Birthday', defaultBirthday, GROUP_IDS.GENERAL);
    const dollars = number(
      'Account Balance',
      12.5,
      { min: 0, max: 100, step: 0.01 },
      GROUP_IDS.GENERAL
    );
    const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL);

    // Favorites
    const nice = boolean('Nice', true, GROUP_IDS.FAVORITES);
    const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES);
    const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);

    // Display
    const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
    const otherStyles = object(
      'Styles',
      {
        border: '2px dashed silver',
        borderRadius: 10,
        padding: '10px',
      },
      GROUP_IDS.DISPLAY
    );

    const style = { backgroundColor, ...otherStyles };

    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';

const name = text('Name', 'Storyteller', GROUP_IDS.GENERAL);
    const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }, GROUP_IDS.GENERAL);
    const birthday = date('Birthday', defaultBirthday, GROUP_IDS.GENERAL);
    const dollars = number(
      'Account Balance',
      12.5,
      { min: 0, max: 100, step: 0.01 },
      GROUP_IDS.GENERAL
    );
    const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL);

    // Favorites
    const nice = boolean('Nice', true, GROUP_IDS.FAVORITES);
    const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES);
    const otherFruit = radios('Other Fruit', otherFruits, 'watermelon', GROUP_IDS.FAVORITES);
    const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);

    // Display
    const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
    const otherStyles = object(
      'Styles',
      {
        border: '2px dashed silver',
        borderRadius: 10,
        padding: '10px',
      },
      GROUP_IDS.DISPLAY
    );

    const style = { backgroundColor, ...otherStyles };

    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';

Banana: 'banana',
      Cherry: 'cherry',
    };
    const fruit = select('Fruit', fruits, 'apple');

    const otherFruits = {
      Kiwi: 'kiwi',
      Guava: 'guava',
      Watermelon: 'watermelon',
    };
    const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
    const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
    const years = number('Years in NY', 9);

    const backgroundColor = color('background', '#dedede');
    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
    const otherStyles = object('Styles', {
      border: '2px dashed silver',
      borderRadius: 10,
      padding: '10px',
    });
    const nice = boolean('Nice', true);
    const images = files('Happy Picture', 'image/*', [
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=',
    ]);

    // NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
    const defaultBirthday = new Date('Jan 20 2017 GMT+0');
    const birthday = date('Birthday', defaultBirthday);

    const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
    const style = { backgroundColor, ...otherStyles };

.addWithJSX('open', () => {
    const approvedTokens = new Set(array('approvedTokens', ['ETH', 'GNO'])) as Set
    return (
       {}}
        resettable={boolean('resettable', true)}
        tokenList={array('tokenCodeList', [])}
        tokenBalances={object('tokenBalances', tokenBalances)}
        open={boolean('open', true)}
        mod={text('mod', 'sell') as TokenMod}
        approvedTokens={approvedTokens}
        availableAuctions={new Set()}
        WETHAddress=""
        MGNAddress=""
        tokenPair={{} as TokenPair}
     />

Max Width: 1280px
      
      
        Width: 100%
      
      
        Left Aligned
      
      
        Center Aligned

sortBy: "desc"
          },
          {
            label: "Published - Most recent first",
            dataField: "original_publication_year",
            sortBy: "desc"
          },
          {
            label: "Published - Oldest first",
            dataField: "original_publication_year",
            sortBy: "asc"
          }
        ]}
        currentPage={number("currentPage", 1)}
        pagination={boolean("pagination", true)}
        includeFields={array("includeFields", ["*"])}
        excludeFields={array("excludeFields", [])}
        paginationAt={text("paginationAt", "bottom")}
      />
    )
  );

() => {
    const columnWidths = array('Column Widths', ['20%', '60%', '20%'])
    const exampleHeaders = array('Headers', ['Name', 'Description', ''])
    const exampleNames = array('Names', ['Apple', 'Banana', 'Orange'])
    const exampleDescriptions = array('Descriptions', [
      'Keeps doctors away',
      'A tropical yellow fruit with a creamy, starchy inside',
      'Spherical and protected by a thick peel',
    ])

    const disabledRows = array('Disabled Rows', ['Banana'])

    return (
      <div>
        
          
            {exampleHeaders.map((col, i) =&gt; (
              </div>

withInfo('Description')(() => {
      let palette = array('Palette', [
        color('Lower', 'pink'),
        color('Low', 'yellow'),
        color('Med', 'lime'),
        color('High', 'blue'),
        color('Higher', 'purple'),
      ]);

      return (
        <div style="{{backgroundColor:">
          </div>

.add('Select with array', () => (
    <select placeholder="{text('placeholder'," label="{text('label',">
  ))
</select>

.add('hints', () => ({
        props: {
            hints: {
                default: array('Hints[Array]', ['My only custom hint', `My second (long) custom hint.Lorem ipsum dolor
                sit amet, consectetur adipiscing elit. Nulla egestas urna rhoncus ipsum congue lobortis. `])
            }
        },
        template: `<div style="border: solid 1px black; padding: 10px; width: 600px;">
                        
                   </div>`
    }));