fix: Correct time picker display and mode switching

[akashs056]

Pull request (PR) checklist

Please check if your pull request fulfills the following requirements:

• I've read the Contribution Guidelines and my PR doesn't break the rules.
• I've read and understand the Developer Guidelines.
• I confirm that I've run the code locally and everything works as expected.
• My PR includes only the necessary changes to fix the issue (i.e., no unnecessary files or lines of code are changed).
• 🎬 I've attached a screen recording of using the new code to the next paragraph (if applicable).

Screen recording of your changes (if applicable):

WhatsApp.Video.2024-08-07.at.19.03.37_cefdac5c.mp4

What's changed?

• Ensure the time picker displays the correct time when reopened
• Automatically switch between 12-hour and 24-hour modes based on system settings

Before	After
https://github.com/user-attachments/assets/efe99c73-1d56-4f41-84a0-1b3f68ee52c0	https://github.com/userattachments/assets/efac3ddc-4923-41b5-9533-6a290b074c52

Does this PR close any GitHub issues? (do not delete)

• Closes [BUG] Time Picker Issue #3394

Troubleshooting GitHub Actions (CI) failures ❌

Pull request checks failing? Read our CI Troubleshooting guide.