[Bug]: DatePicker with type range renders value property incorrectly

[KJaspers]

Package

@carbon/react

Browser

No response

Package version

v1.60.1

React version

v18.3.1

Description

I use a DatePicker in our product very similar to this:

 const [start, setStart] = useState();
 const [end, setEnd] = useState();

 const onPeriodChanged = (range) => {
   setStart(range[0]);
   setEnd(range[1]);
 };

 return (
   <div>
     <DatePicker
       datePickerType="range"
       value={[start, end]}
       onChange={onPeriodChanged}
     >
       <DatePickerInput
         id="date-picker-input-id-start"
         placeholder="mm/dd/yyyy"
         labelText="Start date"
         size="md"
       />
       <DatePickerInput
         id="date-picker-input-id-finish"
         placeholder="mm/dd/yyyy"
         labelText="End date"
         size="md"
       />
     </DatePicker>
   </div>
 );

When selecting a range, the first input contains start & end date. This shouldn't be, right?

Note: With previous versions (Carbon 10) this worked...

Reproduction/example

https://stackblitz.com/edit/github-7ujtwx?file=src%2FApp.jsx

Steps to reproduce

• Select a date range
• Expected: The first input shows the start date only
• Actual: The first input contains start & date

Note: With previous versions (Carbon 10) this worked...

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[bendiggle]

I have also been seeing the same and left a comment on a previous closed issue

[riddhybansal]

Hey @KJaspers @bendiggle We already have any raised issue for this and added in our sprint.

[sstrubberg]

Dupe #16734