Referring to Fluent UI React v9’s DatePicker: https://react.fluentui.dev/?path=/docs/compat-components-datepicker–default, the value property is the default value. But when I set it, something strange happens.

Whenever I set the value property, the highlighted Day in the DatePicker stays the same regardless of selecting any date in the DatePicker.

How do I ensure the highlighted day gets changed accordingly when default value has been set?

NOTE: If I just set the initialDatePicker value, the highlighted Day changes based on selected date but the text input field will not display the initial date

Here is the code

import * as React from 'react';
import { DatePicker } from '@fluentui/react-datepicker-compat';
import { Field } from '@fluentui/react-components';
import type { DatePickerProps } from '@fluentui/react-datepicker-compat';

export const Default = (props: Partial<DatePickerProps>) => {
  return (
    <>
      <Field label="Select a date (Input field has value but highlight wouldn't change)">
        <DatePicker
          placeholder="Select a date..."
          value={new Date()}
          initialPickerDate={new Date('May 2, 2024')}
          {...props}
        />
      </Field>
      <Field label="Select a date #2 (highlight changes but no initial value in Input field)">
        <DatePicker
          placeholder="Select a date..."
          initialPickerDate={new Date('May 2, 2024')}
          {...props}
        />
      </Field>
    </>
  );
};

Here’s the demo: https://stackblitz.com/edit/ppi3bg?file=src%2Fexample.tsx