How to use the office-ui-fabric-react.MessageBarType.error function in office-ui-fabric-react

<div style="{{backgroundColor:">
        
        {
          (!this.props.list || !this.props.eventStartDate.value || !this.props.eventEndDate.value) ?
            
            :
            // test if has errors
            this.state.hasError ?
              
                {this.state.errorMessage}
              
              :
              // show Calendar
              // Test if is loading Events
              <div>
                {this.state.isloading ?  :
                  <div>
                    </div></div></div>

const globalContext = useGlobalContext();
    const {formError} = props;

    useEffect(() => {
      globalContext.modifySaveForm(async () => {
        await submitForm();
      });
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
      <form autocomplete="{&quot;off&quot;}" style="{{width:">
        <h3 style="{{textAlign:">Parameters</h3>
        {formError &amp;&amp; <div style="{{marginBottom:">
            <div style="{{textAlign:"></div>
        </div>}

        <table cellpadding="{10}" style="{{borderCollapse:">
          <thead>
          <tr style="{{fontWeight:">
            <th>
              
            </th>
            <th>
              
            </th>
            <th>
              
            </th></tr></thead></table></form>

isBlocking: false,
            styles: jsStyles.modalStyles
            //  topOffsetFixed: true
          }}>
          {this.state.isLoading ? (
            
          ) : (
            <>

            

            

              
                {this.state.hasError ? (
                  {this.state.errorMessage}
                ) : (
                  <>

dialogContentProps={{
            type: DialogType.normal,
            title: strings.DocumentsLabel
          }}
          modalProps={{
            isBlocking: true,
            styles: tsStyles.modalStyles
            //  topOffsetFixed: true
          }}>
          {this.state.isloading ? (
            <div style="{{">
            
            </div>
          ) : (
            &lt;&gt;
              {this.state.hasError &amp;&amp; {this.state.messageError}}
              <div style="{{">
              <label>{this.state.messageInfo}</label>
              
              </div>

) : (
              
                {this.state.assigns.length > 0 && (
                  <>
                    <h4 style="{{">Assigned</h4>
                    {this.state.assigns}
                  
                )}

                {(this.state.unAssigns.length &gt; 0 || this.state.hasMoreMembers) &amp;&amp; ( // Has Member or has more pages to load, show unassigns
                  &lt;&gt;
                    <h4 style="{{">Unassigned</h4>

                    {this.state.hasError ? (
                      {this.state.messageError}
                    ) : (
                      
                        {this.state.unAssigns}
                      
                    )}
                  
                )}
              
            )}

})
    values.product.Idlist = idlist.substr(0, idlist.length - 1);
    return idlist.substr(0, idlist.length - 1);
  }

  const selectOnChange = (fieldKey: string, event: React.FormEvent, option?: IDropdownOption, index?: number) => {
    if (option) {
      setFieldValue(fieldKey, option.key, false);
    }
  };

  const textboxClassName = (props.isNew ? "form_textboxmodal" : "form_textbox");

  return (
    <form autocomplete="{&quot;off&quot;}" style="{{">
      {formError &amp;&amp; <div style="{{">
        <div style="{{"></div>
      </div>}
      
        
        {isNew &amp;&amp;
          
            
              
              <input value="{getidlist()}" name="{'product.Idlist'}" type="hidden"></form>

);
      }
      if (type === 'USER_FAILURE' || type === 'UNKNOWN_FAILURE') {
        result.push(...this.getUserFailureHintItems(jobInfo));
      } else {
        result.push(
          
            Please send the{' '}
            exit diagnostics to
            your administrator for further investigation.
          ,
        );
      }

      return (
        
          <div>{result}</div>
        
      );
    } else if (state === 'Waiting') {
      const resourceRetries = get(jobInfo, 'jobStatus.retryDetails.resource');
      if (resourceRetries &gt;= 3) {
        return (
          
            <div>
              
                {resourceRetries}
              
              
                <div>
                  Please adjust the resource requirement in your{' '}
                  job config, or wait</div></div>

);
        }}
      />
    );
  }

  const DisplayErrors = (errors) => {    
    return null;
  };

  return (
    <form autocomplete="{&quot;off&quot;}" style="{{">
      {formError &amp;&amp; <div style="{{">
        <div style="{{"></div>
      </div>}
      
      {parameters}
    
  );
}
</form>

{
          messageBarType:MessageBarType.success,
          isMultiline:false,
          dismissButtonAriaLabel:"Close"
        },
        "You data has been saved sucessfully"
      );
      //const camContainer = document.getElementById("camContainer")
      ReactDom.render(element2, this._messageContainer);     
    }
    
    else{
      const element2 = React.createElement(
        MessageBar,
        {
          messageBarType:MessageBarType.error,
          isMultiline:false,
          dismissButtonAriaLabel:"Close"
        },
        "Please select captcha."
      );
      //const camContainer = document.getElementById("camContainer")
      ReactDom.render(element2, this._messageContainer);     
    }
  }