why button on:click does not work in svelte

I want to show a text input field whenever changeEmail is true. So I handleClick to set it to true. However, when I click on a button nothing happens. Would appreciate any help.

  let changeEmail = false; function handleClick() {   console.log(changeEmail)    changeEmail = !changeEmail;  }  $: changeEmail;</script><div class="card"><div class="info-column"><h2>About</h2><div class="info-field"><h4>Name</h4>      {userModel.firstName} {userModel.lastName}</div><div class="info-field"><h4>Email</h4>      {#if changeEmail === false}        {userModel.email}      {:else}<TextInput placeholder="${userModel.email}"/>      {/if}<Button on:click={handleClick}>Edit</Button></div></div></div>

this is a component that looks like this on page

<section><PersonalSettingsCard userModel={$user}></PersonalSettingsCard></section>