Selecting a date in 2nd date picker clears the 1st date picker (UI Fabric React)

Question

I'm making a SPFx webpart and I've 3 date pickers. See images below.

1. First I start with 3 empty date pickers (oké they looks good)

   

2. Then I select a pick up date (no problems so far)

   

3. Then I select a return date but when selecting a date, it clears the pick up date (here the bug starts).

   

4. Same for when I select an event date, it clears the return date (here the bug happens again).

   

This is my code:

import { DayOfWeek, DatePicker } from 'office-ui-fabric-react';

export interface IMyComponentState {
    pickUpDate?: Date;
    returnDate?: Date;
    eventDate?: Date;
}

export class MyComponent extends React.Component<{}, IMyComponentState > {
    public render(): React.ReactElement<{}> {
        return (
            <div>
                <DatePicker
                    isRequired
                    label={strings.datePickUp}
                    key={"1"}
                    onSelectDate={pickUpDate => { this.setState({ pickUpDate }); }}
                    firstDayOfWeek={DayOfWeek.Monday} />

                <DatePicker
                    label={strings.dateReturn}
                    key={"2"}
                    onSelectDate={returnDate => { this.setState({ returnDate }); }}
                    firstDayOfWeek={DayOfWeek.Monday} />

                <DatePicker
                    isRequired
                    label={strings.dateEvent}
                    key={"3"}
                    onSelectDate={eventDate => { this.setState({ eventDate }); }}
                    firstDayOfWeek={DayOfWeek.Monday} />
            </div>
        );
    }
}

See also this code pen

How could I solve the bug my component? I've debugged my code a lot but couldn't find the problem.

This are my debug results after step 3:

Like you can see the states are still correct.

Answer 1

It seems you are not setting any value to your components:

 <DatePicker
    isRequired
    label={strings.datePickUp}
    value={this.state.datePickup} //Add this
    key={"1"}
    onSelectDate={pickUpDate => { this.setState({ pickUpDate }); }}
    firstDayOfWeek={DayOfWeek.Monday} />