Issue in Lightning-progress-indicator in lwc

 Hello all today i will share one inserting issue, when we used conditional rendering within  

Lightning-progress-indicator

ProgressIndicatorBasic.html

<template>

    <p>

        A progress indicator displays the steps in a process. All steps preceding the step specified by currentStep are marked completed.

    </p>

    <lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">

        <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>

     <template if:true={areDetailsVisible}>

            <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>

        </template>

        <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>

        <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>

    </lightning-progress-indicator>

</template>

ProgressIndicatorBasic.js

import { LightningElement } from 'lwc';

export default class ProgressIndicatorBasic extends LightningElement {}

Issue: As per the above code if  <template if:true={areDetailsVisible}> is true then Lightning-progress-indicator step will

correctly otherwise current steps selection will display correctly.

Updated code:-

<template>

    <p>

        A progress indicator displays the steps in a process. All steps preceding the step specified by currentStep are marked completed.

    </p>

   <template if:true={areDetailsVisible}>

<lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">

        <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>

        <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>

        <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>

        <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>

    </lightning-progress-indicator>

<template>

<template if:false={areDetailsVisible}>

<lightning-progress-indicator current-step="3" type="base" has-error="true" variant="base">

        <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>

       <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>

        <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>

    </lightning-progress-indicator>

<template>

</template>