Pointers always point to default time even after time updated

[MalikaN]

<TimePicker
 id={section}
 trigger={this.getTrigger(section)}
 {...this.props}
 focused={focused}
 meridiem={meridiem}
 timeMode='12'
 onFocusChange={this.onFocusChange(section)}
 onTimeChange={this.onTimeChange(section)}
 time={hour && minute ? '6:20' : '5:45'}
/>

During the initial render the pointers are on the correct position like so

I have an edit function which updates the time to 6:20. and even then the pointers are on the initial positions even though the time values are updated.