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

withState({ text: '' })(({ store }) => {
    const props = {
      style: object('style', {}),
      className: text('className', 'n2o'),
      filters: array('filters', []),
    };

    return (

.addWithJSX('Default', () => (
    
  ));

},
  ];

  const props = {
    loading: boolean('loading', N2OSelectJson.loading),
    value: text('value', N2OSelectJson.value),
    disabled: boolean('disabled', N2OSelectJson.disabled),
    placeholder: text('placeholder', N2OSelectJson.placeholder),
    hasSearch: boolean('hasSearch', N2OSelectJson.hasSearch),
    valueFieldId: text('valueFieldId', N2OSelectJson.valueFieldId),
    labelFieldId: text('labelFieldId', N2OSelectJson.labelFieldId),
    filter: text('filter', N2OSelectJson.filter),
    resetOnBlur: boolean('resetOnBlur', N2OSelectJson.resetOnBlur),
    iconFieldId: text('iconFieldId', N2OSelectJson.iconFieldId),
    imageFieldId: text('imageFieldId', N2OSelectJson.imageFieldId),
    groupFieldId: text('groupFieldId', N2OSelectJson.groupFieldId),
    hasCheckboxes: boolean('hasCheckboxes', N2OSelectJson.hasCheckboxes),
    closePopupOnSelect: boolean(
      'closePopupOnSelect',
      N2OSelectJson.closePopupOnSelect
    ),
    cleanable: boolean('cleanable', N2OSelectJson.cleanable),
    format: text('format', N2OSelectJson.format),
  };

  return ;
});

render() {
    const panelStyle = select(
      'panelStyle',
      ['primary', 'secondary', 'success', 'warning', 'danger'],
      'primary',
    );
    const iconPosition = select('iconPosition', ['left', 'right'], 'right');
    return (
      
        
        
          
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas
            beatae nostrum quo fuga iste reprehenderit ab fugit, soluta ea!
            Culpa, dignissimos dolores! Delectus fugiat numquam doloremque
            consequuntur tempora ipsam excepturi. Lorem ipsum dolor sit amet
            consectetur adipisicing elit. Saepe, reiciendis culpa incidunt

() => {
      const image = text("image", "paris_fr");
      const destinationCity = text("destinationCity", "Paris");
      const dataTest = text("dataTest", "test");
      const height = number("height", 300);
      const departureCity = text("departureCity", "Prague");
      const destinationCountry = text("destinationCountry", "United Arab Emirates");
      const price = text("price", "5,563 Kč");
      const timeOfStay = text("timeOfStay", "10 nights");
      const outbound = object("outbound", {
        date: "Wed 31 Oct",
        type: "Direct",
        duration: "6h 10m",
      });
      const inbound = object("inbound", { date: "Fri 9 Nov", type: "Direct", duration: "6h 50m" });
      const tabIndex = text("TabIndex", "0");

      return (

() => {
      const image = text("image", "paris_fr");
      const destinationCity = text("destinationCity", "Paris");
      const dataTest = text("dataTest", "test");
      const height = number("height", 300);
      const departureCity = text("departureCity", "Prague");
      const destinationCountry = text("destinationCountry", "United Arab Emirates");
      const price = text("price", "5,563 Kč");
      const timeOfStay = text("timeOfStay", "10 nights");
      const outbound = object("outbound", {
        date: "Wed 31 Oct",
        type: "Direct",
        duration: "6h 10m",
      });
      const inbound = object("inbound", { date: "Fri 9 Nov", type: "Direct", duration: "6h 50m" });
      const tabIndex = text("TabIndex", "0");

      return (

.add('Playground', withInfo({ inline: true, source: false, propTables: null })(() =>
  (

placeContent={select(
              'placeContent',
              [
                'start',
                'end',
                'center',
                'stretch',
                'space-around',
                'space-between',
                'space-evenly',
                null,
              ],
              null,
              gridGroupId
            )}
            gridAutoColumns={text('gridAutoColumns', '', gridGroupId)}
            gridAutoRows={text('gridAutoRows', '', gridGroupId)}
            gridAutoFlow={text('gridAutoFlow', '', gridGroupId)}
            grid={text('gridAutoFlow', '', gridGroupId)}
          >
            {renderGridElements()}
          
        
      
    
  ));

.addWithJSX('Default', () => (
    
  ));