Changing the image in the block on click

I have a block where the following should happen, there are several img-to-select images, and when you click on it, it should become main-image, and the title should also change, it will be different for all images. And accordingly, the selected class is assigned to the img-to-select__item class

<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="title">
        <span>
          Title
        </span>
      </div>
      <div class="main-image">
        <img src="/img/company-a.jpg" alt="">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="/img/company-a.jpg" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="/img/company-b.jpg" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="/img/company-c.jpg" alt="">
        </div>
        <div class="img-to-select__item">
          <img src="/img/company-d.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

I understand that this should be a super easy task, but I'm still weak in js

from Changing the image in the block on click