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

export const withDataGrid = () => (
  
    
      I am the widget header title
    
    
       console.log('Datagrid selection changed')}
        checkboxSize={select('Checkbox size', ['small', 'medium', 'large'], 'small')}
        processing={boolean('Processing', false)}
      >
         (numSelectedRows === 1 ? 'sélectionné' : 'sélectionnés')}
        >
          <button label="Marks as paid" size="small">
          </button>

.add('Компонент', () => {
    const props = {
      loading: boolean('loading', true),
      type: select('type', ['cover', 'inline'], 'cover'),
      text: text('text', 'text'),
      delay: select('delay', [1000, 2000, 3000, 4000], 1000),
    };
    return (
      
        
          <div>
            <div style="{{">
              <input>
            </div>
            <div style="{{">
              
                  
                    <table>
                </table></div></div>

.add('Default', () => (
    <button size="{select(">
      {text('Label', 'Default Button')}
    </button>
  ))
  .add('Flat', () =&gt; (

`)(() => (
      <button color="{select('button">
        
      </button>
    ))
  )

value={value}
              onChange={(event, ...args) => {
                action('onChange')(event, ...args);
                onChange(event.target.value);
              }}
              onBlur={action('onBlur')}
              min={min.trim() === '' ? undefined : parseInt(min, 10)}
              max={max.trim() === '' ? undefined : parseInt(max, 10)}
              step={step.trim() === '' ? undefined : parseFloat(step, 10)}
              isAutofocussed={boolean('isAutofocussed', false)}
              isDisabled={boolean('isDisabled', false)}
              isReadOnly={boolean('isReadOnly', false)}
              hasError={boolean('hasError', false)}
              hasWarning={boolean('hasWarning', false)}
              placeholder={text('placeholder', 'Placeholder')}
              horizontalConstraint={select(
                'horizontalConstraint',
                ['xs', 's', 'm', 'l', 'xl', 'scale'],
                'm'
              )}
            />
          )}
        />

.add('Basic', () => (

.add('CodeEditor', withState({ codePreview: false }, (store) => {
        const codeEditorData = data.codeEditor
        const mode = select('Mode', codeEditorData.modes, codeEditorData.defaultMode)
        const theme = select('Theme', codeEditorData.themes, codeEditorData.defaultTheme)
        const fontSize = select('Font size', codeEditorData.fontSizes, codeEditorData.defaultFontSize)
        const showInvisibles = boolean('Show invisible characters', false)
        const showGutter = boolean('Show gutter', true)
        const showIndent = boolean('Show indentations', true)
        const wrap = boolean('Wrap', false)
        const readonly = boolean('Readonly', false)

        return <div>
            <h1>CodeEditor</h1>

            <h2>Informations</h2>

            <p>This component is the same one as <span>CodeEditorInput</span> except that it is not used in a form. It is mainly used to display readonly content or content that wont be submitted.</p>

            <h2>Usage</h2></div>

withNotes('This is note')(() => (
        <button size="{select(">
          {text('Label', 'Default Button')}
        </button>
      )),
    ),

withNotes('This is Collapse')(() => (
         }
        />
      ))
    )

.add('Basic', () => (
    <input required="{boolean('required'," placeholder="{text('placeholder'," maxlength="{number('maxLength'," is="" value="" disabled="{boolean('disabled'," autocomplete="{select('autoComplete'," type="{select('type'," id="myInput"> {
        action('Changed!');
      }}
    /&gt;
  ))
  .add(