I want to update an amp-list which its data is from amp-state data.

<div>
    <amp-script layout="container" script="hello" class="sample" data-ampdevmode>

        <button id="button">Update</button>

        <amp-state id="localState">
          <script type="application/json">
            {
              "items": [{"id": 3}, {"id": 1}, {"id": 2}]
            }
          </script>
        </amp-state>

        <amp-list width="auto" height="140" layout="fixed-height" src="amp-state:localState">
          <template type="amp-mustache">
            <li>@{{id}}</li>
          </template>
        </amp-list>

    </amp-script>

    <script id="hello" type="text/plain" target="amp-script">
        document.getElementById('button').addEventListener('click', async (e) => {
            let items = [{"id": 6}, {"id": 7}, {"id": 8}];
            await AMP.setState({localState: {items: items}});

            console.log(await AMP.getState('localState'));
        });

    </script>

</div>

but when I click on the button to update, it is updating the AMP state, but it doesn't show the updated data on the page.