Реагировать Bootstrap форма не дает правильный цвет

Question

Привет, я пытаюсь реализовать форму в реакции.

Итак, вот мой код для формы:

<Form
  onSubmit={this.onCreate}
  noValidate
  validated={validated}
  autoComplete="off"
>
  <Form.Row>
    <Form.Group as={Col} controlId="professionName">
      <Form.Label>Name *</Form.Label>
      <Form.Control
        required
        type="text"
        name="name"
        value={name}
        onChange={this.onChange}
        placeholder="Profession Name"
      />
      <Form.Control.Feedback type="invalid">
        Please provide profession name.
      </Form.Control.Feedback>
      <Form.Control.Feedback style={{color:'red'}}>
        {emesg? emesg:null}
      </Form.Control.Feedback>
    </Form.Group>
  </Form.Row>
  <Button variant="primary" type="submit" disabled={isButtonLoading}>
    Add Profession
    {isButtonLoading ? (
          <Spinner
            as="span"
            animation="border"
            size="sm"
            role="status"
            aria-hidden="true"
          />
        ) : null}
  </Button>
</Form>

Итак, emesg приходит из бэкэнда при отправке формы. Сообщение загружается нормально, но цвет фона все еще зеленый.

когда реализован первый элемент управления формы, он правильно меняет свой цвет, но когда сообщение об ошибке передается из бэкэнда, цвет поля ввода не меняется.

Я попытался добавить type="invalid", но удаляет сообщение об ошибке все вместе. Может ли что-нибудь помочь, пожалуйста