For loop only printing first iteration multiple time

I am building a rent calculator app which have 3 fields total rent,rent incresese per year and number of years to calculate rent for .when i fill the input field the code only print first iteration multiple time i want it to print increased value with years

Html file

Rent Calculator

<input type="number" name="rent" placeholder="Enter your total rent" [(ngModel)]="rent" />

<input type="number" placeholder="Rent increase per Year" [(ngModel)]="increase">

<input type="number" placeholder="Number of Total Years" [(ngModel)]="months">

<button type="button" (click)="calculate()"> Calculate </button>
<br>

<h4 *ngFor="let r of total;let i=index">

    Year {{i+1}}&nbsp; &nbsp;=&nbsp;&nbsp;{{r}}&nbsp;Rs

</h4>

ts file...

export class RentCalculatorComponent {

  constructor() { }

  increase!: number;

  months!: number;

  rent!: number;

  new!: number;

  total: any[] = [];//declare an array

  calculate() {

    for (let i = 0; i <= this.months - 1; i++) {
     
      this.new = this.rent + this.rent * this.increase / 100;

      this.total[i] = this.new.toFixed(2);; //here store in the array the result

      console.log(this.total[i]);

    }
  }
}