ng-bootstrap Scrollspy : Show only one image (active) at a time

Question

I'm using ng-bootstrap Scrollspy in Angular 17 ref. : https://ng-bootstrap.github.io/#/components/scrollspy/overview

I want to show only one image at a time in ngbScrollSpy #s="ngbScrollSpy" and as we scroll remaining images will be hidden, as shown in the Expected output image.

home.component.html

<!-- How it Works START -->
  <div class="container">
    <div class="row how-it-works justify-content-between align-items-center">
      <div class="col-12">
        <h2>How it works</h2>
        <p>See how our products make it easy for you</p>
      </div>
      <div class="col-5">
        <nav class="navbar px-3 mb-3">
          <!-- <span class="navbar-brand">How it's Work</span> -->
          <ul class="nav nav-pills" [ngbScrollSpyMenu]="s">
            <li class="nav-item">
              <!-- <button class="nav-link" ngbScrollSpyItem="basic-1">Grab our product</button> -->
              <div class="nav-link" ngbScrollSpyItem="basic-1">
                <div class="title">Grab our product</div>
                <p>
                  Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
                  synth master cleanse.
                </p>
              </div>
            </li>
            <li class="nav-item">
              <div class="nav-link" ngbScrollSpyItem="basic-2">
                <div class="title">Activate product & build profile</div>
                <p>
                  Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
                  synth master cleanse.
                </p>
              </div>
            </li>
            <li class="nav-item">
              <div class="nav-link" ngbScrollSpyItem="basic-3">
                <div class="title">Share & connect</div>
                <p>
                  Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
                  synth master cleanse.
                </p>
              </div>
            </li>
            <li class="nav-item">
              <div class="nav-link" ngbScrollSpyItem="basic-4">
                <div class="title">Save contact & turn into leads</div>
                <p>
                  Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
                  synth master cleanse.
                </p>
              </div>
            </li>
          </ul>
        </nav>
      </div>
      <div class="col-5">
        <div ngbScrollSpy #s="ngbScrollSpy" class="text-center" style="height: 400px">
          <!-- rootMargin="0px 0px -40%" -->
          <h4 ngbScrollSpyFragment="basic-1">01</h4>
          <img src="https://placehold.co/400x350" alt="Image" />
          <h4 ngbScrollSpyFragment="basic-2">02</h4>
          <img src="https://placehold.co/400x350" alt="Image" />
          <h4 ngbScrollSpyFragment="basic-3">03</h4>
          <img src="https://placehold.co/400x350" alt="Image" />
          <h4 ngbScrollSpyFragment="basic-4">04</h4>
          <img src="https://placehold.co/400x350" alt="Image" />
        </div>
      </div>
    </div>
  </div>
  <!-- How it Works END -->

home.component.scss

.how-it-works {
    @extend .pt-5;
    @extend .pb-5;

    .navbar {
        .nav-pills {
            .nav-item {
                width: 100%;
                border-bottom: 1px solid $gray-500;

                &:last-child {
                    border-bottom: 0px;
                }

                .nav-link {
                    padding: 12px 0;

                    &.active {
                        background-color: transparent;

                        .title {
                            color: $primary;
                        }

                        p {
                            display: block;
                            color: $dark;
                            margin-bottom: 0;
                        }
                    }

                    .title {
                        font-size: $fs-lg;
                        font-weight: 500;
                        color: $dark;
                    }

                    p {
                        display: none;
                    }
                }
            }
        }
    }
}

My Output:

Expected Output: