How to keep a reference to component created within a loop?

I’m learning Svelte and I’m trying to make a component (a color palette). I blindly went for a solution where each ColorSelector (the color div you click on) is a Svelte component. (I’d gladly take an example where no child components are used)

I export a selected property in the ColorSelector.svelte component file. I’d like to set that property to false on every ColorSelectors instantiated when one of them is clicked except on the one that has been clicked.

However, I’m struggling to find how to keep a reference to an instantiated component in a loop. How can I achieve this?

<script lang="ts">
  import { Colors, Color } from "./modules/colors";
  import ColorSelector from "./ColorSelector.svelte";

  const DEFAULT_COLOR = Colors.LIGHT_WHITE;
  let selectedColor:Color = DEFAULT_COLOR;

function handleClick(event, i) {
  selectedColor = event.detail.color;
  // When clicked set ColorSelector.selected = false on evert ColorSelectors 
  // except the one that has been clicked
}
</script>

<div>
  {#each Object.values(Colors) as color, i}
    <ColorSelector on:selected={handleSelect} color={color}></ColorSelector>
  {/each}
</div>

<style>
  div {
    display: flex;
  }
</style>