External change of the checked state is not triggering the animation.

[JeelRajodiya]

<script lang="ts">
import Checkbox from 'svelte-checkbox';
    export let checked:boolean = false;

const updateCheckStatus = ()=>{
    checked = !checked;
}
</script>

<main>
<div >
    <span on:click={updateCheckStatus }>Form Field</span>
    <Checkbox bind:checked />
  
</div>
</main>

when I click on the Form Field text function updateCheckStatus is invoked which changes the checked state.
but the checkbox does not show any change or any animation