Hi, i've some problems with the input form

*_Expected behavior_*I need a rounder verison of the MDBInput.A colleague of yours has already kindly suggested that I implement the css code with the following piece:

.form-outline .form-control:focus ~ .form-notch .form-notch-trailing,
.form-outline .form-control.focused ~ .form-notch .form-notch-trailing,
.form-outline .form-control ~ .form-notch .form-notch-trailing,
.form-outline .form-control ~ .form-notch .form-notch-trailing {
  border-radius: 50px 0 0 50px;
}

Actual behavior

unfortunately by adding this part I get the two outline types and every react input is affected. below I leave two screenshots of how I would like to modify MDBInput and how it looks if I add the code above.

do you have any advice for me? (For example, it is better not to touch the input bar because it only creates confusion, I would understand).

Resources (screenshots, code snippets etc.)

here my react code

<div className="form-container">
          <form className="d-flex ">
            <div className="bar">
              <MDBInput
                label="Search"
                type="text"
                className="sBar"
                size="sm"
                contrast
              />
            </div>
            <MDBBtn color="dark" className="search-btn" size="sm">
              <MDBIcon icon="search" />
            </MDBBtn>
          </form>
        </div>

and here the css part

.form-container {
  width: 40%;
}

.bar {
  width: 100%;
}

.form-outline .form-control:focus ~ .form-notch .form-notch-trailing,
.form-outline .form-control.focused ~ .form-notch .form-notch-trailing,
.form-outline .form-control ~ .form-notch .form-notch-trailing,
.form-outline .form-control ~ .form-notch .form-notch-trailing {
  border-radius: 50px 0 0 50px;
}