Angular - Reactive Forms: "Error: Cannot find control with path:" and other issues

Background

I am creating a form that allows the user to input financial data for 'n' number of years in a form that needs to be dynamic - for each year there are several inputs required. In order to achieve this I set up my form as follows:

export class FinancialHistoryFormComponent {
  
  financialHistory = this.formBuilder.group({
    financialHistoryArray: this.formBuilder.array([]),
  }) as FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  get financialHistoryArray() {
    return this.financialHistory.controls['financialHistoryArray'] as FormArray;
  }

  ngOnInit() {
    const financialHistoryYear: FormGroup = this.formBuilder.group({
      revenue: ['', Validators.required],
      costOfSales: ['', Validators.required],
      operatingExpenses: ['', Validators.required],
      otherIncome: ['', Validators.required],
      interestExpense: ['', Validators.required],
      interestIncome: ['', Validators.required],
      taxation: ['', Validators.required],
    });

    for (let i = 0; i < 2; i++) {
      this.financialHistoryArray.push(financialHistoryYear);
    }
  }

  originalOrder = (
    a: KeyValue<string, FormGroup>,
    b: KeyValue<string, FormGroup>
  ): number => {
    return 0;
  };
}

Simplified - its a FormGroupfinancialHistory for all financial data containing a FormArray financialHistoryArray with all financial data broken down by year container in another FromGroup financialHistoryYear which itself has various FormControls as required

Problem 1

My form is displayed using the following template:

  <form [formGroup]="financialHistory">
    <div formArrayName="financialHistoryArray">
      <div
        style="display: flex; flex-direction: row"
        *ngFor="
          let financialHistoryYear of financialHistoryArray.controls;
          let i = index
        "
      >
        <!-- <form [formGroup]="financialHistoryYear"> -->
        <!-- <form [formGroup]="{{financialHistoryArray.controls[i]}}"> -->
        <form [formGroupName]="i">
          <div
            class="input-row"
            *ngFor="let control of financialHistoryYear | keys"
          >
            <div class="spacer"></div>
            <input
              class="small-input"
              type="text"
              formControlName="{{ control }}"
              value=""
              required
            />
          </div>
        </form>
      </div>
    </div>
  </form>

The issue is when I run the form I get the following errors on my console:

Console log errors

As you may notice there is commented out code my template - I tried other approaches to the problem but the above is the only one that would run without a compiler issue

If I replace <form [formGroupName]="i"> with <form [formGroup]="financialHistoryYear"> I get the following compiler error:

Error: src/app/screens/valuations/financial-history/financial-history-form/financial-history-form.component.html:27:16 - 
error TS2740: Type 'AbstractControl' is missing the following properties from type 'FormGroup': controls, registerControl, addControl, removeControl, and 3 more.

27         <form [formGroup]="financialHistoryYear">

If I replace <form [formGroupName]="i"> with <form [formGroup]="{{financialHistoryArray.controls[i]}}"> I get the following compiler error:

Error: src/app/screens/valuations/financial-history/financial-history-form/financial-history-form.component.html:28:29 - 
error TS2322: Type '{ "": any; }' is not assignable to type 'FormGroup'.
  Object literal may only specify known properties, and '""' does not exist in type 'FormGroup'.

28         <form [formGroup]="{{financialHistoryArray.controls[i]}}">

I am not sure how to fix this/these errors

Problem 2

Even when I do get the application to run the input are not position as I planned and after trying serval styling I still can't get it right. I am not sure if its related to the issue in problem 1 but my inputs are in 1 column of 14 inputs (as per below image) as opposed to 2 columns of 7 inputs each

Form as it stands

My styling sheet is provided for reference

.form-container,
.inputs-container {
  display: flex;
  flex-direction: column;
}

.form-header {
  display: flex;
  flex-direction: row;
}

.input-container {
  display: flex;
  flex-direction: row;
}

.input-titles {
  display: flex;
  flex-direction: column;
}

.input-row {
  display: flex;
  flex-direction: row;
}

.input-title {
  width: 150px;
  margin-left: 10px;
  align-items: center;
  justify-content: center;
}

.spacer {
  display: flex;
  flex-grow: 1;
}

Any assistance I can get on these issues would really be appreciated! TIA