When i'm trying to change data dynamically of the each loop variable is not refreshing the DOM elements. How I can redraw the each loop values

<script>

    // default messages object

     let messages =[{

    "name":"John",

    "message":"Hi",

         "checked": false

  },

  {

    "name":"Anthony",

    "message":"welcome",

         "checked": true

  },

  {

    "name":"David",

    "message":"thank you",

         "checked": false

  }]

 //click function to change the values dynamically 

function test(){

     messages.map(ob=>{

        ob.checked = true;

    })

    console.log(messages)

}

</script>

template code

<div>

    {#each messages as m}

    <div>{m.checked}

        <input type="checkbox" bind:checked={m.checked}>

            {m.name}

        </div>

    {/each}

    <br>

    <button on:click={()=>{test()}}> check all values</button>

</div>

link for snippet: https://svelte.dev/repl/887e7e2de4114ec1bb3625c264b9a62c?version=3.24.1

Any help would be appreciated! Thank you :)