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} ₹76,890

</TouchableOpacity>

); };

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;`

[annx10kn]

same issue with latest version