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

<button> console.log(123)}
      &gt;
        console.log(123)
      </button>
      <button> console.log({
          some: { strong: [{ language: 123 }] },
        }, 123)}
      &gt;
        console.log(Object)
      </button>
      <button>
        {text('text', 'Button text')}
      </button>
    
  ), {
    // notes: 'A very simple component',

.add('audio file', () => {
    const fixtureProps = {
      title: text('title', 'Ted Talk'),
      mediaUrl: text(
        'mediaUrl',
        'https://download.ted.com/talks/KateDarling_2018S-950k.mp4'
      ),
      sttJsonType: text('sttJsonType', 'bbckaldi'),
      isEditable: boolean('isEditable', true),
      spellCheck: boolean('spellCheck', false),
      fileName: text('fileName', 'KateDarling_2018S-950k.mp4'),
      // commenting this version of `transcriptData` coz it seems that
      // loading a json this sisde effects storybook performance
      // transcriptData: object('transcriptData', bbcKaldiTranscript),
      transcriptData: bbcKaldiTranscript,
      handleAnalyticsEvents: action('Analytics event'),
      handleAutoSaveChanges: action('handleAutoSaveChange'),
      autoSaveContentType: select(
        'autoSaveContentType',
        [
          'draftjs',
          'digitalpaperedit',
          'txt',
          'txtspeakertimecodes',

.add('Inputs group', () => (
     console.log('Swap it!')}>
      
       updateKnob('value', 'text', target.value)}
      />
    
  ))
  .add('Different controls group', () => (

component: () => (
    <form name="myform">
      </form>

}).add('default', () => {
    const label = text('label', 'Example ButtonToggleGroup');
    const labelHelp = text('labelHelp', 'This text provides more information for the label.');
    const inputWidth = text('inputWidth', '');
    const fieldHelp = text('fieldHelp', 'This text provides help for the input.');
    const fieldHelpInline = boolean('fieldHelpInline', false);
    const labelInline = boolean('labelInline', false);
    const labelWidth = labelInline ? text('labelWidth', '') : undefined;
    const labelAlign = labelInline ? select(
      'labelAlign',
      OptionsHelper.alignBinary,
      OptionsHelper.alignBinary[0]
    ) : undefined;

    return (

.add('grouping', () => (
		<div>
			
			
		</div>

.add('Playground', () => {
    const imageUrl = text('Image URL', null);
    const price = text('Price', '$1234');
    const place = text('Place', 'Place');
    const country = text('Country', 'Country');
    const disabled = boolean('Disabled', false);

    return (
      
    );
  });

() => (
      
    )
  )

({ service }) => (
       {}}
        duration={text('duration', '2:30')}
        durationSpoken={text('durationSpoken', '2 minutes 30 seconds')}
        datetime={text('datetime', 'PT2M30S')}
      />
    ),
    { notes },