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

['EUR', 'USD', 'EGP'],
                'EUR'
              )}
              onBlur={action('onBlur')}
              onFocus={action('onFocus')}
              hideCurrencyExpansionControls={boolean(
                'hideCurrencyExpansionControls',
                false
              )}
              defaultExpandCurrencies={
                // we need to set undefined instead of false to avoid prop-type
                // warnings in case hideCurrencyExpansionControls is true
                defaultExpandCurrencies || undefined
              }
              isDisabled={boolean('isDisabled', false)}
              isReadOnly={boolean('isReadOnly', false)}
              placeholder={object('placeholder', { EUR: '', USD: '' })}
              horizontalConstraint={select(
                'horizontalConstraint',
                ['m', 'l', 'xl', 'scale'],
                'm'
              )}
              hasError={boolean('hasError', false)}
              hasWarning={boolean('hasWarning', false)}
              errors={
                Object.values(errors).some(error => error.length > 0)
                  ? Object.entries(errors).reduce((acc, [currency, error]) => {
                      if (error.length === 0) return acc;
                      acc[currency] = {error};
                      return acc;
                    }, {})
                  : undefined

return 'A custom error.';
                  default:
                    return null;
                }
              }}
              isRequired={boolean('isRequired', false)}
              touched={boolean('touched', false)}
              name={text('name', '')}
              value={value}
              onChange={event => {
                action('onChange')(event);
                onChange(event.target.value);
              }}
              onBlur={action('onBlur')}
              onFocus={action('onFocus')}
              isAutofocussed={boolean('isAutofocussed', false)}
              isDisabled={boolean('isDisabled', false)}
              isReadOnly={boolean('isReadOnly', false)}
              placeholder={text('placeholder', 'Placeholder')}
              autoComplete={select(
                'autoComplete',
                ['on', 'off', 'current-password', 'new-password'],
                'off'
              )}
              title={text('title', 'Password')}
              hint={hint}
              description={text('description', '')}
              onInfoButtonClick={
                boolean('show info button', false)
                  ? action('onInfoButtonClick')
                  : undefined
              }

.add('With text', () => (
    
      Display text with a{' '}
      
        link
      {' '}
      inside
    
  ))
  .add('With text and icon', () => (

48,
		{ range: true, min: 0, max: 180, step: 1 },
		GROUP_IDS.NAVBAR
	);
	const navbarMenu = select("navbarMenu", [CUSTOM_MENU, NONE], NONE, GROUP_IDS.NAVBAR);
	const navbarClass = selectV2(
		"navbarClass",
		{
			"grey-bg": "grey-bg",
			"yellow-bg": "yellow-bg",
			none: ""
		},
		"",
		GROUP_IDS.NAVBAR
	);
	const backButton = boolean("backButton", true, GROUP_IDS.NAVBAR);
	const backButtonOnFirstView = boolean("backButtonOnFirstView", false, GROUP_IDS.NAVBAR);
	const handleBackButton = select(
		"handleBackButton",
		[GO_BACK, POP_VIEW, ALERT_SOMETHING, NONE],
		GO_BACK,
		GROUP_IDS.NAVBAR
	);
	const handleBackBehaviourOnFirstView = select(
		"handleBackBehaviourOnFirstView",
		[ALERT_SOMETHING, LOG_IN_CONSOLE, NONE],
		ALERT_SOMETHING,
		GROUP_IDS.NAVBAR
	);

	const properties = {
		active,

formatOnInit={boolean('formatOnInit', defaultProps.formatOnInit)}
      separateDialCode={boolean('separateDialCode', defaultProps.separateDialCode)}
      defaultCountry={text('defaultCountry', defaultProps.defaultCountry)}
      geoIpLookup={action('geoIpLookup')}
      nationalMode={boolean('nationalMode', defaultProps.nationalMode)}
      numberType={text('defaultCountry', defaultProps.defaultCountry)}
      noCountryDataHandler={action('noCountryDataHandler')}
      onlyCountries={array('onlyCountries', defaultProps.onlyCountries)}
      preferredCountries={array('preferredCountries', defaultProps.preferredCountries)}
      onPhoneNumberChange={action('onPhoneNumberChange')}
      onPhoneNumberBlur={action('onPhoneNumberBlur')}
      onPhoneNumberFocus={action('onPhoneNumberFocus')}
      onSelectFlag={action('onSelectFlag')}
      disabled={boolean('disabled', defaultProps.disabled)}
      placeholder={text('placeholder', defaultProps.placeholder)}
      autoFocus={boolean('autoFocus', defaultProps.autoFocus)}
      autoComplete={text('autoComplete', defaultProps.autoComplete)}
      useMobileFullscreenDropdown={boolean('useMobileFullscreenDropdown', defaultProps.useMobileFullscreenDropdown)}
      format={boolean('format', defaultProps.format)}
      onFlagClick={action('onFlagClick')}
    />
  )));

() => (
      }
        modalSize={select('modalSize', ['sm', 'md', 'lg', 'full'], 'md')}
        modalTitle={text('modalTitle', 'red')}
        onRequestClose={action('onRequestClose')}
        onTitleClose={action('onTitleClose')}
      >
        {Array(20)
          .fill('')
          .map((_, index) => (
            <div>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Exercitationem, fugit velit. Aliquam autem blanditiis, consequatur
              dolore eius, harum ipsum maxime nam nihil officiis optio, pariatur
              repellat soluta suscipit tempora ut?
            </div>

spinner={boolean('Spinner', true)}
    step={number('Step', 1)}
    connectedLeft={
      boolean('Toggle connected left', false) ? <button label="€" size="{select('Size',"> : undefined
    }
    connectedRight={
      boolean('Toggle connected right', false) ? (
        </button><button size="{select('Size',">
          Discount
        </button>
      ) : (
        undefined
      )
    }
    prefix={boolean('Toggle prefix', false) ? prefix : undefined}
    suffix={boolean('Toggle suffix', false) ? suffix : undefined}
    width={text('Width', undefined)}
  /&gt;
);

id={name.trim() === '' ? undefined : name}
              horizontalConstraint={select(
                'horizontalConstraint',
                ['m', 'l', 'xl', 'scale'],
                'm'
              )}
              errors={object('errors', null)}
              renderError={errorKey => {
                switch (errorKey) {
                  case 'customError':
                    return 'A custom error.';
                  default:
                    return null;
                }
              }}
              isRequired={boolean('isRequired', false)}
              touched={boolean('touched', false)}
              name={text('name', 'description')}
              value={value}
              onChange={event => {
                action('onChange')(event);
                onChange({
                  ...value,
                  [event.target.language]: event.target.value,
                });
              }}
              selectedLanguage={select(
                'selectedLanguage',
                Object.keys(value),
                Object.keys(value)[0]
              )}
              onBlur={action('onBlur')}

function GetReachable() {
  const levels = number('levels', 5);
  const distance = number('distance', 3);
  const outline = boolean('outline', true);

  class Runner extends React.Component {
    state = {
      filled: [
        [0, 1, -1],
        [1, 0, -1],
        [2, -1, -1],
        [0, -1, 1],
        [-1, 0, 1],
        [-2, 2, 0],
      ].map(createCoordinate),
    };
    onClick = clickedCell => {
      const isSameAsClicked = isSame(clickedCell);
      const isAlreadyFilled = this.state.filled.some(isSameAsClicked);
      const filled = isAlreadyFilled

const PowerSelectMultipleWithHooks = props => {
  const [selected, setSelectedCountries] = useState([countries[8], countries[4]]);
  return (
     {
        action('onChange')(args);
        setSelectedCountries(args.options);
      }}
      optionLabelPath={text('optionLabelPath', 'name')}
      placeholder={text('placeholder', 'Select your favorite countries')}
      disabled={boolean('disabled', false)}
      showClear={boolean('showClear', true)}
      searchIndices={array('searchIndices', ['name', 'code'])}
      optionComponent={({ option }) => (
        <div>
          <img src="{option.flag}">
          {option.name} ({option.code})
        </div>
      )}
      selectedOptionComponent={({ option, select }) =&gt; (
        <span>
          <img src="{option.flag}">
          {option.name}
        </span>
      )}
    /&gt;
  );
};