How can I use an Angular Material Datepicker with a reactive / model-driven form?

I have a reactive (model-driven) angular form with multiple form groups (formGroupName) and controls. The form-fields on this form are controlled and populated by a FormBuilder in the associate TypeScript file.

I have a text field on this form that I'm using to collect a date from the user. I wanted to associate an Angular Material datepicker on this field but as soon as I add a "formControlName" attribute to this input field, I get the error:

Error: More than one custom value accessor matches form control with path: ' -> '

I can't use ngModel (switch to a template driven form) as everything else on this form is model-driven and this control sits within a formGroupName block. I did try putting an ngModel on here just to see what would happen and Angular complained that I can't mix an ngModel in here.

How can I data-bind this field (set the initial value for this field on the TypeScript side) and then get any changes made by the user on the template/view when the form is submitted while using Angular Material's datepicker? If Angular Material's date picker doesn't support Model-driven forms, I'm willing to use another date-picker that supports this feature.

My model looks like this (the field that's relevant to this discussion is step1.visitDate):

this.form = this.fb.group({
        step1: this.fb.group({
            representative: [null],
            visitDate: [new Date()],
            category: ["Retail Store Visit"],
            contactType: ["Store Visit"],
            goPakStore: [null],
            goPakLocation: [null],
            eventType: ["Outreach"],
            eventDescription: [null],
            servicePlaza: [null],
            inventoryLocation: [null]
        }),
        step2: this.fb.group({
            inventoryItemLocation: [null],
            quantityAvailable: [null],
            quantityDistributed: [null],
        })
    });

My HTML template looks like this (the relevant parts):

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate>
<md-card class="users-listing" formGroupName="step1">
    <md-card-content>
        <div>
            <md-input-container style="width:98%;">
                <input mdInput placeholder="Visit Date" [mdDatepicker]="visitDatePicker" formControlName="visitDate" required trim maxlength="10">
                <button mdSuffix [mdDatepickerToggle]="visitDatePicker"></button>
            </md-input-container>
            <md-datepicker #visitDatePicker></md-datepicker>
        </div>
    </md-card-content>
</md-card>