These are the codes for TimeSelect.js$,$ Summary.js$,$ Calendar.js and AdviserMyPage.js

When I test the codes, it does work well as the user can multiple select dates and times for each and then it summarize the the selected options just like how I want it to be but the user aren't able to deselect their options in case the user want to cancel some date$/$times so I want to make changes for this part. You dont have to rewrite every codes but please just explain in detail in which part should I change and show me the changed code.

#IMPORT SECTIONS#

const AdviserMyPage $=()=>\{$

const $[$userInfo$,$ setUserInfo$]=$ useState$(\{\})$;

const $[$roles$,$ setRoles$]=$ useState$([])$;

const $[$loading$,$ setLoading$]=$ useState$($true$)$;

const $[$selectedDates$,$ setSelectedDates$]=$ useState$([])$;

const $[$selectedTimes$,$ setSelectedTimes$]=$ useState$(\{\})$;

const $\{$ isOpen, onOpen, onClose $\}=$ useDisclosure$()$;

const $[$currentDate$,$ setCurrentDate$]=$ useState$($null$)$;

const handleDateSelect $=($date$)=>\{$

if $(!$selectedDates.some$($d $=>$ d$.$getTime$()===$ date.getTime$()))\{$

setSelectedDates$([...$selectedDates, date$])$;

setCurrentDate$($date$)$;

onOpen$()$;

$\}$

$\}$;

const handleTimeSelect $=($date$,$ time$)=>\{$

setSelectedTimes$(\{$

$...$selectedTimes,

$[$date$]$: $[...($selectedTimes$[$date$]||[]),$ time$]$

$\})$;

$\}$;

const handleFinalizeSelection $=()=>\{$

$//$ Replace this alert with actual handling logic like API call

alert$(\text{'}$Consultations added:

$\text{'}+$ JSON.stringify$($selectedTimes$,$ null, $2))$;

$\}$;

#OTHER SECTIONS#

$\{/*$ Time Section $*/\}$

Add your consulting day and time

$\{$isOpen && currentDate && $($

$)\}$