How to use the @ui5/webcomponents-react/lib/ValueState.ValueState.None function in @ui5/webcomponents-react

onInput?: (event: Event) => void; // @generated
  onSubmit?: (event: Event) => void; // @generated
  onSuggestionItemSelect?: (event: Event) => void; // @generated
  icon?: ReactNode; // @generated
  children?: string;
}

const Input: FC = withWebComponent(UI5Input);

Input.displayName = 'Input';

Input.defaultProps = {
  placeholder: null, // @generated
  type: InputType.Text, // @generated
  value: '', // @generated
  valueState: ValueState.None // @generated
};

export { Input };

export const renderStory = () => {
  return (
    <div>
      
      
      
      
      
      
    </div>
  );
};
renderStory.story = {

/**
 * In order to use the Radio Button in Compact Size, please add the following snippet to your `index.html`:
 * ```
 * 
 * ```
 *
 * This Storybook is currently only working in ContentDensity=Cozy.
 */
const RadioButton: FC = withWebComponent(UI5RadioButton);

RadioButton.displayName = 'RadioButton';

RadioButton.defaultProps = {
  valueState: ValueState.None // @generated
};

export { RadioButton };

valueState?: ValueState; // @generated
  readonly?: boolean; // @generated
  onChange?: (event: Event) => void; // @generated
  onInput?: (event: Event) => void; // @generated
  onSelectionChange?: (event: Event) => void; // @generated
  children?: ReactNode[]; // @generated
}

const MultiComboBox: FC = withWebComponent(UI5MultiComboBox);

MultiComboBox.displayName = 'MultiComboBox';

MultiComboBox.defaultProps = {
  value: '', // @generated
  placeholder: '', // @generated
  valueState: ValueState.None // @generated
};

export { MultiComboBox };

);
  }
);

AnalyticalCardHeader.displayName = 'AnalyticalCardHeader';

AnalyticalCardHeader.defaultProps = {
  title: null,
  subTitle: null,
  arrowIndicator: DeviationIndicator.None,
  showIndicator: true,
  indicatorState: ValueState.None,
  value: null,
  unit: null,
  valueState: ValueState.None,
  target: null,
  deviation: null,
  onHeaderPress: null,
  description: null,
  counter: null,
  counterState: ValueState.None,
  currency: null
};

AnalyticalCardHeader.defaultProps = {
  title: null,
  subTitle: null,
  arrowIndicator: DeviationIndicator.None,
  showIndicator: true,
  indicatorState: ValueState.None,
  value: null,
  unit: null,
  valueState: ValueState.None,
  target: null,
  deviation: null,
  onHeaderPress: null,
  description: null,
  counter: null,
  counterState: ValueState.None,
  currency: null
};

)}
          <div>{description}</div>
        
      
    );
  }
);

AnalyticalCardHeader.displayName = 'AnalyticalCardHeader';

AnalyticalCardHeader.defaultProps = {
  title: null,
  subTitle: null,
  arrowIndicator: DeviationIndicator.None,
  showIndicator: true,
  indicatorState: ValueState.None,
  value: null,
  unit: null,
  valueState: ValueState.None,
  target: null,
  deviation: null,
  onHeaderPress: null,
  description: null,
  counter: null,
  counterState: ValueState.None,
  currency: null
};

export const defaultStory = () => (
  
    Selection 1
    Selection 2
    Selection 3
    Selection 4
    Selection 5
  
);

{percentValue <= 50 ? null : progressBarTextSpan}
        
        <div>{percentValue &lt;= 50 ? progressBarTextSpan : null}</div>
      
    );
  }
);

ProgressIndicator.displayName = 'ProgressIndicator';

ProgressIndicator.defaultProps = {
  percentValue: 0,
  displayValue: '',
  width: 'auto',
  height: '',
  state: ValueState.None
};

export { ProgressIndicator };

const iconClasses = StyleClassHelper.of(classes.icon);
  iconClasses.put(classes[`icon${state}`]);
  const textClass = classes[`text${state}`];

  return (
    <div slot="{slot}" title="{tooltip}" style="{style}">
      {iconToRender &amp;&amp; <div>{iconToRender}</div>}
      {children !== null &amp;&amp; children !== undefined &amp;&amp; <span>{children}</span>}
    </div>
  );
});

ObjectStatus.displayName = 'ObjectStatus';

ObjectStatus.defaultProps = {
  state: ValueState.None,
  showDefaultIcon: false,
  icon: null,
  children: null
};

export { ObjectStatus };