[Bug] State Update Without Re-render When Using Custom Timepicker with Range Picker

[vc-vishal]

Environment
React: 16.14.0
react-multi-date-picker: ^4.5.2
Browser: Chrome (latest)
Operating System: Windows 10

Issue Description:

When integrating the react-multi-date-picker package in my application with custom Timepicker and footer buttons (Apply and Cancel), I noticed that the package is updating state directly without causing a re-render. This leads to inconsistent state management and unexpected behavior.

I knew this package works without state, but I didn't imagine how problematic this feature would be for my requirement.

1st I have implemented custom Timepicker which have double Time select.

2nd I have implemented Cancel and Apply buttons in footer plugin. I have managed Apply and Cancel button using multiple states.

Additionally, I implemented a custom timepicker plugin that does not use the state and handler provided by this package. Despite this, the package is updating my state without following React's conventions, causing state updates without re-renders.

Watch console.log("selectedRange OutSide", selectedRange?.toString()); when updating time from timepicker.

codesandbox:

As this is React package, I recommend that this package should provide a way to work fully controlled with React states.