Nested angular reactive form components but add FormControls flat on parent form

So I basically I have a large form and want to split it up into multiple sub-form components. Nothing special so far. Consider this target data structure:

{
    additionalProps: {
        prop1: any
        prop2: any,
        ...
    }
    modifierType: enum,
    modifierProp1: any,
    modifierProp2: any,
    modifierProp3: any,
    ...
} 

Depending on which modifierType I select I can get different modifierProps.

So far I read a lot about the ControlValueAccessor interface and have a somewhat functioning abstract ControlValueAccessorBase implementation of it that I could use for any sub-form component that represents an object in my data structure, e.g. additionalProperties. Now I want to create a modifier-selection.component that implements my abstract ControlValueAccessorBase without getting a structure like this:

{
   additionalProps: {
       prop1: any
       prop2: any,
       ...
   }
   modifier: {
       modifierType: enum,
       modifierData: {
           modifierProp1: any,
           modifierProp2: any,
           modifierProp3: any,
           ...
       }
   }
} 

My minimalistic HTML for the modifier-selector.component looks something like the following (which I get if I implement my abstract ControlValueAccessorBase on all sub-components):

<div [formGroup]="form">
    <mat-select formControlName="type"></mat-select>
    <modifier-A *ngIf="this.form.controls['type'].value === ModifierType.A" formControlName="modifierData"></modifier-A>
    <modifier-B *ngIf="this.form.controls['type'].value === ModifierType.B" formControlName="modifierData"></modifier-B>
</div>

Note: I can't change the target data structure because of backwards compatability and I really want to avoid mapping my data between the two structures. But the goal here really is to learn how to create an abstract ControlValueAccessor that can also write it's child FormControls "flat" onto the "root" form.