amp bind to hidden does not work on page load even with default state

### Description

I have two buttons showing two different icons based on a state value. When the component first loads, I want one of the buttons to visible.

For some reason, it's not reading the default state resulting in the two buttons getting displayed.

### Reproduction Steps

this is the state:

```


</amp-state>
```

and this is the code for the two buttons:

```
<form
method="post"
action-xhr={`${hostName}/api/${itemId}/toggleFav`}
target="_top"
id="toggle-favorite-form"
dir="rtl"
encType="application/x-www-form-urlencoded"
>
<div className="add-to-fav-wrapper">
<div
className="ops-icon"
on={
'tap:AMP.setState({ favState: { newState: false }}),toggle-favorite-form.submit'
}
role="add-to-fav"
tabIndex="0"
data-amp-bind-hidden="favState.newState == false"
>
<Favorite />
</div>

<div
className="ops-icon"
on={
'tap:AMP.setState({ favState: { newState: true }}),toggle-favorite-form.submit'
}
role="remove-from-fav"
tabIndex="1"
data-amp-bind-hidden="favState.newState == true"
>
<NoneFavorite />
</div>
</div>
<input
hidden
name="newState"
data-amp-bind-value="favState.newState"
/>
<input
hidden
name="userId"
data-amp-bind-value="favState.userId"
/>
</form>
```

### Relevant Logs

_No response_

### Browser(s) Affected

Chrome, Firefox

### OS(s) Affected

_No response_

### Device(s) Affected

_No response_

### AMP Version Affected

2109102127000

Start from the reported amp-bind data-amp-bind-hidden behavior and reproduce it with the provided amp-state and two button bindings using AMP version 2109102127000 in Chrome or Firefox. Trace how the default state is initialized and applied on page load; done means only the button matching the initial newState is visible without requiring a user interaction.

Written by the indexing model from the issue text.