Bootstrap, избавьтесь от границы значка в поле ввода

Я работаю с Bootstrap в React и пытаюсь реализовать пароль, где есть значок, по которому можно щелкнуть, чтобы переключаться между типами текста и пароля внутри поля ввода. Я реализовал всю логику, но поле значка/ввода имеет границу, поэтому оно выглядит как кнопка справа от ввода, например:

Мне было интересно, как я могу избавиться от этой границы, разделяющей их, чтобы это выглядело так, как будто оно находится внутри поля ввода, как в этом примере:

Это код, который я написал с замененными хуками реакции

import { Icon } from "react-icons-kit";
import { eyeOff } from "react-icons-kit/feather/eyeOff";
import { eye } from "react-icons-kit/feather/eye";

<label>Password</label>
<div className = "mb-3 input-group">
    <input
        type = "password"
        name = "password"
        className = "form-control"
        placeholder = "Enter password"
        required
    />
    <span className = "input-group-append bg-white">
        <span className = "input-group-text bg-transparent">
            <Icon icon = {eyeOff} size = {15}/>
        </span>
    </span>
</div>

Я пытался добавить "border border-right-0" в класс div input-group, который, похоже, ничего не делает, а также "border border-left-0" в класс span input-group-append, но это кажется чтобы создать другую границу вокруг границы, которая уже существует.