Reactjs TextField helperText

how can I synchronize error validation with the character limit without affecting its functions, please see this https://codesandbox.io/s/nostalgic-mestorf-47jsvk?file=/src/App.js

  const [formError, setFormError] = useState(false);
  const CHARACTER_LIMIT = 1000;
  const [getString, setString]= useState({
    value: "",
    length: 0
  })


const onHandleChangeInput = (field, value) => {
  setString({value: value, length: value.length})
}
  const onHandleInputValidation = (field, value) => {
    try {
      Joi.assert(value, _.get(VALIDATION_SCHEMA, field));
      setFormError(_.omit(formError, field));
      return { error: false, valid: true };
    } catch (err) {
      return { error: err.message, valid: false };
    }
  };
    <TextField
      label="Name"
      inputProps={{
        maxlength: CHARACTER_LIMIT
      }}
      values={getString.name}
      onChange={(value) => onHandleChangeInput('name', value)}
      error={Boolean(formError.name)}
      helperText={{formError.name}, `${getString.length}/${CHARACTER_LIMIT}`}
    />

what i want is just like this

>Solution :

Your onChange handler gets the event. You need to get the value out of it.

1. Update the onHandleChangeInput like below.

const onHandleChangeInput = (field, event) => {
    const { value } = event.target;
    setString({ value: value, length: value.length });
    onHandleInputValidation(field, value);
};

2. name the parameter as event instead of value to be clear.

onChange={(event) => onHandleChangeInput("name", event)}

3. Use a ternary to show error message or helperText.

      helperText={
        Boolean(formError.name)
          ? formError.name
          : `${getString.length}/${CHARACTER_LIMIT}`
      }