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

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

MessageToast.success = (text, options: CommonProps = {}) => {
  const toastContent = (
    <div style="{mergeStyleWithDefault(options.style)}">
      
      <span style="{{">{text}</span>
    </div>
  );

  MessageToast.show(toastContent, options);
};

const indicatorIcon = useMemo(() => {
      const arrowClasses = StyleClassHelper.of(classes.arrowIndicatorShape);
      switch (arrowIndicator) {
        case DeviationIndicator.Up:
          arrowClasses.put(classes.arrowUp);
          break;
        case DeviationIndicator.Down:
          arrowClasses.put(classes.arrowDown);
          break;
        default:
          arrowClasses.put(classes.arrowRight);
          break;
      }

      switch (indicatorState) {
        case ValueState.Success:
          arrowClasses.put(classes.good);
          break;
        case ValueState.Error:
          arrowClasses.put(classes.error);
          break;
        case ValueState.Warning:
          arrowClasses.put(classes.critical);
          break;
        default:
          arrowClasses.put(classes.none);

          break;
      }
      return <div>;
    }, [arrowIndicator, indicatorState, classes]);
</div>

export const defaultStory = () => (
  
    }
  >

export const withDefaultIcon = () => (
  
    Default Icon Status
  
);
withDefaultIcon.story = {

const getDefaultIcon = (state) => {
  switch (state) {
    case ValueState.Error:
      return ;
    case ValueState.Success:
      return ;
    case ValueState.Warning:
      return ;
    case ValueState.Information:
      return ;
    default:
      return ;
  }
};

export const defaultStory = () => (
  
    }
  >