Changing element of reactive array svelte

ArrayDemo.svelte

<script>
  let messages = [
    { text: 'bru' },
    { text: 'moment' },
    { text: 'testing' },
    { text: '123' },
  ];

  let hideChoice = '';

  const hide = () => {
    const i = parseInt(hideChoice);
    const before = messages.slice(0, i);
    const after = messages.slice(i + 1);
    messages = [...before, { ...messages[i], text: 'hidden' }, ...after];
  };
</script>

<input bind:value={hideChoice} />
<button on:click={hide}>
  Hide
</button>

{#each messages as msg, i}
  <p>{msg.text}</p>
{/each}