isInvalid prop isn't highlighting the input box red - react-bootstrap form

I am using React along with react-bootstrap for creating forms.

I have a form with an email field like this -

Code -

<Form
  noValidate
  autoComplete="off"
  validated={this.state.validated}
  onSubmit={this.handleSubmit}
>
  <Form.Group className="mb-3" controlId="email">
    <Form.Label>Email</Form.Label>
    <Form.Control
      type="email"
      aria-describedby="email"
      placeholder="Email"
      value={this.state.email}
      onChange={this.handleChange}
      name="email"
      required
    />
    <Form.Control.Feedback type="invalid">
      Please enter your email
    </Form.Control.Feedback>
  </Form.Group>
  <Button type="submit">Register</Button>
</Form>

I know that if I want to keep showing the error message even if the user has filled the field I can do this - <Form.Control isInvalid={true}>

But this doesn't remove the green border and the tick mark, and the form still gets submitted. Only the invalid message is visible

Is there any way or any class name that I can specify so that react-bootstrap doesn't consider the field as validated?

I want to do this as the email validation in react bootstrap forms considers this as a correct email - my@email. So, I want to apply custom validation.