Managing Date Picker State on Cancel or Close

Initial Display:

When the user navigates to the edit_profile page:
- There is a DOB widget that displays the user's date of birth (DOB) if it is already stored in the database.
- If the DOB is not yet set in the database, the widget will show "Set your Birthday" text

Interacting with the Date Picker:

When the user clicks on the DOB widget:
- A Date Picker is displayed, allowing the user to select a new date.
- If the user selects a date and confirms it, the newly chosen date immediately replaces the current value in the DOB widget.
- The user can then click a "Save" button on the edit_profile page to update their DOB in the database with the newly selected date.

Handling Cancellation or Clicking Out:

If the user opens the Date Picker but decides not to select a date:
- The user can either press cancel Date Picker or click outside the Date Picker to close it.
- In such cases, the DOB widget should revert to displaying the user's current DOB from the database.

Page State Setup:
- I've implemented a page state variable called dateSelected. This state variable is used to manage whether the DOB widget displays the current date of birth from the database or the date selected by the user.
- Initial Behavior: When the dateSelected state is false, the DOB widget shows the user's date of birth (DOB) from the database.
- User Interaction: When the user clicks on the DOB widget, the dateSelected state is set to true.
Date Picker Interaction:
- If the user selects a date from the Date Picker and confirms it, the new date is displayed in the widget, replacing the current DOB shown.
- However, if the user opens the Date Picker but then clicks out or cancels the selection, the dateSelected state remains true.
- The Issue: Since the dateSelected state is still true, the widget expects a new date to be displayed. But because no date was actually selected (the Date Picker likely returns null or no value), the DOB widget ends up displaying an empty field.

The dateSelected state doesn’t revert to false when the user cancels or dismisses the Date Picker without choosing a date.
As a result, instead of reverting to showing the DOB from the database, the widget may display nothing, leading to a poor user experience.

Question: How can I accurately detect when the Date Picker is closed or canceled without a date being selected, and how can I then reset the dateSelected state to false in this scenario?
Objective: I’m looking for advice on either how to fix this issue or suggestions on creating a smooth and user-friendly experience for updating their date of birth.