Generate HTML Form using ReactiveFormsModule angular 9

I am trying to build master APIs for the control panel. For that I need to generate the dynamic form in .ts file. Let me explain.

// Here is an array for generate 3 inut fields
const UserFields = [
    {
        name : 'name',
        type : 'text
    },
    {
        name : 'email',
        type : 'email
    },
    {
        name : 'password',
        type : 'text
    }
]

When I generate input filed in form using *ngFor and FormGroup its works fine. But in some cases, I need N level fields. In that case, I need to use Recursive Function to generate HTML Form

So I created Recursive Function and bind using innerHTML but the issue is that. FormGrop not working in that case.

Here is My Recursive Function

recursiveFields(formElement = ''){
    UserFields.map( (field : any)  => {
      // email or text or number
        formElement += `<input
        name="${field.name}" 
        type="${field.type}"
        [formControlName]="${field.name}" 
        class="form-control" />`;
      }
    });

    return formElement;
  }

recursiveFields() is working fine and generates HTML what I need. But After submit form I can't get value from FormGrop.

How can I achieve this Gole? Please help me. :)