Html – How can I prevent the second eye icon?

I had some preexisting code for a non-functional signup form, which already had an eye svg to it which would change the obstruction of the text within the password input box. However, upon adding some new logic I am confused as to why there is a new black eye logo similar to the windows one to the right, which only appears after the box has been typed in and disappears frequently once the OG icon has been clicked, etc. Any help?

<CustomTextField
                  borderRadius={15}
                  borderColor="rgba(50, 54, 69, 1)"
                  width={0.385}
                  height={50}
                  icon={
                    passwordVisible ? (
                      <EyeSlash color={handleIconColor('password')} onClick={togglePasswordVisibility} />
                    ) : (
                      <Eye color={handleIconColor('password')} onClick={togglePasswordVisibility} />
                    )
                  }
                  iconColor={handleIconColor('password')}
                  hintText="Password"
                  hintColor="grey"
                  fontSize={15}
                  obscureText={!passwordVisible}
                  onFocus={() => handleFocus('password')}
                  onBlur={handleBlur}
                  name="password"
                  value={formData.password}
                  onChange={handleChange}
                  onIconClick={togglePasswordVisibility}
                />

const Eye = ({ color, onClick }) => (
  <svg xmlns="http://www.w3.org/2000/svg" style={{fill:color}}width="21" height="21" fill="currentColor" className="bi bi-eye-fill" viewBox="0 0 16 16" onClick={onClick}>
  ...
);

const EyeSlash = ({ color, onClick }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="currentColor" className="bi bi-eye-slash-fill" viewBox="0 0 16 16" onClick={onClick}>
  ...
);