Im trying to access the object value in HTML for the conditional rendering, But the error is thrown while accessing the value.

When a user selects perticulat product image, im changing the Visble value of the object, which is then used for the conditional rendering check.

This is the error show in the console -

Compiler worker caught an error CompilerError: Invalid expression {divTemplates[1].visible} - LWC1060: Template expression doesn't allow NumericLiteral

Kindly help..

Below are the code snippet

html---

<div class="slds-align_absolute-center"><img src={product.Image_Url__c} class="product"
alt={product.name} onclick={handleSelectItem}/></div>
<p class="slds-align_absolute-center heading">{product.name}</p>
<div class="slds-grid slds-gutter" if:true={divTemplates[0].visible}>Product 1 Detail</div>
<div class="slds-grid slds-gutter" if:true={divTemplates[1].visible}>Product 2 Detail</div>
<div class="slds-grid slds-gutter" if:true={divTemplates[2].visible}>Product 3 Detail</div>

js---
@track divTemplates=[
{'name':'LUSM',visible:false},
{'name':'GUSM',visible:false},
{'name':'CV',visible:false}
];
handleSelectItem(event){
this.divTemplates.forEach(template => template.visible = template.name === event.target.alt);
}

is if:true={divTemplates[1].visible} is correct way of accessing the object value??