TypeError: Cannot read property 'getTime' of undefined, js engine: hermes when using custom component

[absolutemadla8]

Getting TypeError while using a custom day component.

`import { useFonts } from "expo-font";
import React, { useState } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { BackButton } from "../../../../Components/backButton";
import { BottomButton } from "../BottomButton";
import {
Poppins_400Regular,
Poppins_700Bold,
Poppins_500Medium,
} from "@expo-google-fonts/poppins";
import { PlayfairDisplay_400Regular } from "@expo-google-fonts/playfair-display";
import { CalendarList, LocaleConfig } from "react-native-calendars";
import { SmallText } from "../../../../Components/Text";
import { ArrowLeft2, ArrowRight2 } from "iconsax-react-native";

LocaleConfig.locales['en'] = {
monthNames: [
'JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE',
'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER'
],
dayNames: ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'],
dayNamesShort: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
today: "TODAY"
};
LocaleConfig.defaultLocale = 'en';

const CustomDay = ({ date, state, marking, onPress }) => {
const textStyle = {
textAlign: 'center',
fontSize: 16,
fontFamily: 'Poppins_600SemiBold',
color: state === 'disabled' ? '#e8e8e8' : '#2d4150',
};

const containerStyle = {
alignItems: 'center',
justifyContent: 'center',
width: 40,
height: 60,
backgroundColor: marking && marking.selected ? '#CB3CA4' : 'transparent',
};

const isSelected = marking && marking.selected;

return (
<TouchableOpacity onPress={onPress} disabled={marking && marking.disableTouchEvent}>

{date.day}
<SmallText style={{ letterSpacing:1, fontSize: 8, color: '#24BE61' }}>₹76,890


);
};

const App = () => {
const [fontsLoaded] = useFonts({
Poppins_400Regular,
PlayfairDisplay_400Regular,
});

const [selectedOption, setSelectedOption] = useState(null);
const [selected, setSelected] = useState([]);

const customTheme = {
backgroundColor: "#ffffff",
calendarBackground: "#ffffff",
textSectionTitleColor: "#b6c1cd",
selectedDayBackgroundColor: "#CB3CA4",
selectedDayTextColor: "#ffffff",
todayTextColor: "#2d4150",
dayTextColor: "#2d4150",
textDisabledColor: "#e8e8e8", // Set the color for disabled dates
textDayFontFamily: "Poppins_600SemiBold",
};

const today = new Date().toISOString().split('T')[0]; // Get today's date in 'YYYY-MM-DD' format

if (!fontsLoaded) return;

return (
<View style={{ flex: 1, backgroundColor: "#fff" }}>
<View
style={{
height: 65,
backgroundColor: "#fff",
justifyContent: "flex-end",
}}
>

<Text
style={{
fontFamily: "Poppins_400Regular",
alignSelf: "center",
fontSize: 16,
}}
>
Select Your Preferred Dates


<View style={{ flex: 1 }}>
<CalendarList
style={{
fontFamily: "Poppins_400Regular",
width: 400,
alignSelf: "center",
marginTop: 20,
}}
onDayPress={(day) => {
console.log(day); // Check what you're receiving
if (selected.length >= 2) {
selected.shift();
}
setSelected([...selected, day.dateString]);
}}
markedDates={{
...selected.reduce((acc, date) => {
acc[date] = { selected: true, disableTouchEvent: true };
return acc;
}, {}),
}}
theme={customTheme}
markingType={"custom"}
renderArrow={(direction) => {
return direction === "left" ? (

) : (

);
}}
hideExtraDays={true}
dayNames={["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]}
minDate={today}
dayComponent={({ date, state, marking, onPress }) => (

)}
/>

<View style={{ justifyContent: "flex-end" }}>
<BottomButton text={'Review Selection'} description={You will be asked for deposit in the next step} />


);
};

export default App;`