date picker using 'ar-SA' locale, displayed dates not correct, while value is ok.

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

17

### Description

I used to use Date Picker with Hijri dates, using native adabter and every thing works fine, after updating to angular 18.1 I got this issue:

* in main.ts => regist SA locale

```
import LocaleSA from '@angular/common/locales/ar-SA';
registerLocaleData(LocaleSA, LanguageEnum.AR);
```

* in app.config.ts => provide native adapter

```
provideNativeDateAdapter(),
{ provide: MAT_DATE_LOCALE, useValue: 'ar-SA' },
```


### Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

### Expected Behavior

I expect to see the correct Hijri date in this case Muharram / محرم first month of Hijri year not Shawal / شوال, and day is 22 not 30

### Actual Behavior

the calendar point at 30/Shawal not 22/Muharram, 30/شوال not 22/محرم

### Environment

- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

Start by reviewing the locale registration in main.ts and the native date adapter and MAT_DATE_LOCALE configuration in app.config.ts. Reproduce the date picker with the ar-SA locale, then verify that the displayed Hijri month and day match the selected value, specifically 22 Muharram rather than 30 Shawal.

Written by the indexing model from the issue text.