md-select-option selected not getting selected on angular reactive form

Nobody has claimed this yet.

### What is affected?

Component

### Description

When I try to use md-outlined-select with Reactive Forms on Angular 17

### Reproduction

In Angular, I have a form with Reactive Forms, it has a couple of Inputs, Selects, and a Submit button to perform a search. When navigating to another route and returning to my search page, the input fields do show the previously entered values, but this does not happen with the Selects.

However, if I use the Selects with ngModel using Template-driven forms, all the select fields work correctly.

Selects doesn't works with Reactive Forms on Angular 17.x:

@for (sport of (sports$ | async); track sport.id) {



}

### Workaround

Using Template-drive Forms works:

@for (sport of (sports$ | async); track sport.id) {



}

### Is this a regression?

No or unsure. This never worked, or I haven't tried before.

### Affected versions

@material/web@1.4.x / and nightly

### Browser/OS/Node environment

Brave Version 1.64.122 Chromium: 123.0.6312.122 (Official Build) (64-bit)
Chrome / Firefox on Arch Linux 6.8

Node 18.18.2
Angular 17.0

Start by reproducing the Angular 17 reactive-forms example with md-outlined-select and compare it with the provided template-driven workaround. Trace how formControlName values are applied when the route is revisited. Done means the select retains its previously entered value with Reactive Forms, while the existing inputs and template-driven workaround continue to work.

Written by the indexing model from the issue text.