imprv: DatePicker component initial value logic

src/components/datepicker/datepicker.tsx

@@ -11,6 +11,7 @@ import {
 	subWeeks,
 	subMonths,
 } from 'date-fns';
+import { getDefaultSelectedValue } from './utils';
 
 export interface DatePickerProps {
 	/** Defines the selection selectionType of the date picker: single, range, or multiple dates. */
@@ -54,15 +55,24 @@ const DatePicker = ( {
 	const [ selectedDates, setSelectedDates ] = useState<
 		TDateRange | Date | Date[] | null
 	>( () => {
-		if ( selected ) {
-			return selected;
+		if ( ! selected ) {
+			return getDefaultSelectedValue( selectionType );
 		}
-		if ( selectionType === 'multiple' ) {
-			return [];
-		} else if ( selectionType === 'range' ) {
-			return { from: null, to: null };
+
+		// Type guards for different selection types
+		const isValidMultiple =
+			selectionType === 'multiple' && Array.isArray( selected );
+		const isValidRange =
+			selectionType === 'range' && 'from' in selected && 'to' in selected;
+		const isValidSingle =
+			selectionType === 'single' && selected instanceof Date;
+
+		// Return selected if valid, otherwise return default value
+		if ( isValidMultiple || isValidRange || isValidSingle ) {
+			return selected;
 		}
-		return null;
+
+		return getDefaultSelectedValue( selectionType );
 	} );
 
 	const handleSelect = ( selectedDate: Date | Date[] | TDateRange | null ) => {

src/components/datepicker/utils.tsx

@@ -13,3 +13,13 @@ export const formatWeekdayName = ( date: Date ) => {
 export const generateYearRange = ( start: number, count = 24 ) => {
 	return Array.from( { length: count }, ( _, i ) => start + i );
 };
+
+export const getDefaultSelectedValue = ( type: string ) => {
+	if ( type === 'multiple' ) {
+		return [];
+	}
+	if ( type === 'range' ) {
+		return { from: null, to: null };
+	}
+	return null;
+};