Bootstrap 5 box-shadow is overlapping in input-group – Html

I’m trying to modify the css of my input-group and input-group text when input is in focus
In this case i’m using bootstrap 5

But as you can see in the image below. There’s some overlapping between input and input-group-text

So far this is my implementation

CSS:

.input-group:focus-within .input-group-text {
        border-color: #ced4da;
    }
    
    .input-group:focus-within .form-control:focus~.input-group-text {
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    }
    

HTML:

<div class="form-group col-xs-6 col-md-6">
    <label for="password" class="required control-label col-form-label text-md-end">Kata sandi</label>
    <div class="input-group">
         <input type="text" class="form-control @error('password') is-invalid @enderror" name="password" id="password" placeholder="Masukkan kata sandi" autocomplete="off">
         <span class="input-group-text rounded-end"><i class="eyepass eyeCross"></i></span> @error('password')
         <div class="invalid-feedback" role="alert">
                 <strong>{{ $message }}</strong>
          </div>
     @enderror
</div>

THE RESULT :

Try to add some padding to input-group-text but seems like not working

UPDATE:

Based on HDP answer the box shadow’s look better.
But somehow, the shadow left and right padding is looks much bigger than the default size