Select Value Update on New Label Addition in Svelte

I'm tring to improve the user experience of an app, and want to update a select item to display a newly added label when a user adds a new option.

Bassically, the labels are being added correctly, but they are not displayed right away in the drop-down menue, but the user have to click and select a label for it to be displayed. I want the drop-down category to change automatically when the user hits the "save" button

My code is listed below, and also can be found in REPL:

<script leng='ts'>    let labels = new Array();    let nLabels = 0;    let currentLabelIndex = 0;    function onSave(){        var labelName = 'Label #: '+ nLabels;         labels = [            ...labels,             {                id: nLabels + 1,                 name: labelName,             }        ];        nLabels = labels.length;    } </script><main><select         id="labelSelect"         bind:value={currentLabelIndex}><!-- {#each labels as videoLabel, index} -->        {#each labels as videoLabel (videoLabel.id)}<h2>index</h2><option value={videoLabel.id}>                {videoLabel.name}</option>        {/each}</select><button id="saveButton" on:click|preventDefault={(e)=>onSave()}>Save</button></main><style>    main {        text-align: center;        padding: 1em;        max-width: 240px;        margin: 0 auto;    }    @media (min-width: 640px) {        main {            max-width: none;        }    }</style>

Thanks