Svelte Flowbite create dropdown in {#each} block and close at select

Question

I tried to create a page to set/change key-value pairs for the item. There is a button to create a new line in the form with two input, one select, and one textfield. I'd like change the select to flowbite button+dropdown (for more control+styling of the content):

<script>
  let validValues = [
    { key: 'key1',value:'value1'],
    { key: 'key2',value:'value2'],
    { key: 'key3',value:'value3']
  };
  let properties = [];

  function addProperty(){
    console.log(properties);
    properties = [...properties, {id: '', key: '', value: ''}];
    console.log(properties);
  }
  function removeProperty(i){
    console.log(i);
    console.log(properties);
    properties.splice(i, 1);
    properties = properties;
    console.log(properties);
  };

</script>

<main>
  <button on:click={() => addProperty()}>Add new row</button>

  {#each properties as prop, i}
    <button id="button{i}" type="button">
      <div>{properties[i].key}</div>
    </button>
    <Dropdown triggeredBy="#button{i}" >
      {#each Object.entries(validProp) as [key,prop]}
        <DropdownItem class="" on:click={() => {properties[i].key=prop.value}}>
          {prop.value}
        </DropdownItem>
      {/each}
    </Dropdown>
    <Input type="text" bind:value={properties[i].value} />
  {/each}
</main>

So: If I click on the DropdownItem, it not closing. I need to close it. I need a boolean variable to bind the "open" props in the . For that I need create and maintained a new array. (I cant store this variable inside the , no function to open/close it) I can maintained at the addPropery, removeProperty functions, but it is not a good way. Maybe I can create it at the {#each) but that is not the svelte way.

how can I handle this? Thanx