dayComponent too many renders about react-native-calendars HOT 1 OPEN

 }) => {
  const today = useRef(dayjs().format('YYYY-MM-DD'));
  const [selectedDate, setSelectedDate] = useState(today.current);
  const [testID, setTestID] = useState(0);

  const onMonthChange = (date: DateData) => {
    onMonthPress(date);
    setTestID(date.month);
  };

  useEffect(() => {
    setTestID(Date.now());
  }, [customParentArrayObject]);

  return (
    <Calendar
      testID={testID.toString()}
      onDayPress={({ dateString }) => {
        onDatePress(dateString);
        setSelectedDate(dateString);
      }}
      markedDates={{
        [today.current]: { today: true },
        [selectedDate]: { selected: true, },
      }}
      renderHeader={renderHeader}
      theme={{
        arrowColor: '#222222',
        arrowStyle: { paddingHorizontal: 53 },
        textSectionTitleColor: '#b6c1cd',
        selectedDayBackgroundColor: '#00adf5',
        todayTextColor: 'blue',
        dayTextColor: 'red',
      }}
      onMonthChange={onMonthChange}
      dayComponent={(props) => <CustomDayComponent customArrayObject={customParentArrayObject} props={props} />}
      hideExtraDays={true}
      disableAllTouchEventsForDisabledDays={true}
      disableAllTouchEventsForInactiveDays={true}
    />
  );
};