Find an Element using find function in parent tag

I’m trying to build a dynamic select box but when I click each .option tag its title place in all select-show in entire page.

I want it to just be placed in the .select-show element that is exactly in the same parent .selectbox tag and not the others.

$(".option").click(function() {
  let selectBoxShow = $(this).parent().find(".select").find(".select-shows");
  let optionTitle = $(this).find(".option-title").text();
  selectBoxShow.text(optionTitle);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>

<div class="selectbox w-50 mb-5">
  <div class="select">
    <div>
      <i class="fa-light fa-grid-2"></i>
      <span class="select-shows">Select your City</span>
    </div>
    <i class="fas fa-angle-down"></i>
  </div>
  <menu class="options">
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Whitehorse</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Yellowknife</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Regina</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Winnipeg</span>
      </div>
    </div>
    <div class="option">
      <div class="option-container">
        <i class="fas fa-angle-left"></i><span class="option-title">Charlottetown</span>
      </div>
    </div>
  </menu>
</div>