Range select is not working (maybe cached onPress) about react-native-calendario HOT 11 CLOSED

react-native-calendario@^3.4.1:
  version "3.4.1"
  resolved "https://registry.yarnpkg.com/react-native-calendario/-/react-native-calendario-3.4.1.tgz#0520d0061ffe12ab0bb824cc7d1b9b844509d213"
  integrity sha512-KdhxgO+HRATf6KHGUExwvv4jaohpkj2vCjNUTacCln2QWwKw4E+ZdVYutEnaWbwP/f+VwiBcsxTPSgnyla4Kpw==
  dependencies:
    moment "2.29.1"
    react-native-month "^1.6.2"
    

import React, { useEffect, useState } from 'react'
import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
import Presentation from 'presentation'
import Utils from 'utils'

import { Calendar } from 'react-native-calendario'
import { Box } from 'presentation/components/atoms'
import { Button } from 'presentation/components/moleculas'

const THEME = {
  monthTitleTextStyle: {
    color: Presentation.Theme.colors['text-secondary'],
    fontWeight: '400',
    fontSize: 18,
  },
  emptyMonthContainerStyle: {},
  emptyMonthTextStyle: {
    fontWeight: '400',
  },
  weekColumnsContainerStyle: {},
  weekColumnStyle: {
    paddingVertical: 10,
  },
  weekColumnTextStyle: {
    color: Presentation.Theme.colors['text-secondary-light'],
    fontSize: 13,
  },
  nonTouchableDayContainerStyle: {},
  nonTouchableDayTextStyle: {
    color: 'white',
  },
  startDateContainerStyle: {
    backgroundColor: Presentation.Theme.colors['background-primary'],
  },
  endDateContainerStyle: {
    backgroundColor: Presentation.Theme.colors['background-primary'],
  },
  dayContainerStyle: {},
  dayTextStyle: {
    color: Presentation.Theme.colors['text-basic'],
    fontWeight: '300',
    fontSize: 16,
  },
  dayOutOfRangeContainerStyle: {},
  dayOutOfRangeTextStyle: {},
  todayContainerStyle: {
    backgroundColor: Presentation.Theme.colors['background-secondary'],
    borderRadius: 1000,
  },
  todayTextStyle: {
    color: Presentation.Theme.colors['text-basic'],
  },
  activeDayContainerStyle: {
    // backgroundColor: Presentation.Theme.colors['background-secondary-light'],
    backgroundColor: '#f2f9c8',
  },
  activeDayTextStyle: {
    color: Presentation.Theme.colors['text-basic'],
  },
  nonTouchableLastMonthDayTextStyle: {},
} as const

const MONTH_HEIGHT = 370 // there was found in the library constants

type CalendarDate = Datestamp | undefined

interface Props {
  contentContainerStyles?: StyleProp<ViewStyle>
  onChange: (startDate: CalendarDate, endDate: CalendarDate) => void
  initialStartDate: CalendarDate
  initialEndDate: CalendarDate
}

const FullScreenCalendar: React.FC<Props> = (props) => {
  const { contentContainerStyles, initialStartDate, initialEndDate, onChange } = props

  const [startDate, setStartDate] = useState<CalendarDate>(initialStartDate)
  const [endDate, setEndDate] = useState<CalendarDate>(initialEndDate)
  const [pressedDate, setPressedDate] = useState<Date | undefined>()

  useEffect(() => {
    if (pressedDate) {
      const datestamp = Utils.Date.toDatestampFromDate(pressedDate)

      if (startDate && endDate) {
        if (startDate === endDate && startDate === datestamp) {
          setStartDate(undefined)
          setEndDate(undefined)
          onChange(undefined, undefined)
        } else {
          setStartDate(datestamp)
          setEndDate(undefined)
          onChange(datestamp, undefined)
        }
      } else if (startDate && !endDate) {
        if (startDate > datestamp) {
          setEndDate(startDate)
          setStartDate(datestamp)
          onChange(datestamp, startDate)
        } else if (startDate === datestamp) {
          setStartDate(undefined)
          onChange(undefined, endDate)
        } else {
          setEndDate(datestamp)
          onChange(startDate, datestamp)
        }
      } else if (!startDate && !endDate) {
        setStartDate(datestamp)
        onChange(datestamp, endDate)
      }

      setPressedDate(undefined)
    }
  }, [endDate, onChange, pressedDate, startDate])

  const containerStyles = React.useMemo(
    () => [contentContainerStyles, styles.ContentContainer],
    [contentContainerStyles],
  )

  return (
    <Box>
      {(startDate || endDate) && (
        <Box position={'absolute'} bottom={120} right={20} zIndex={1000}>
          <Button
            color={'basic'}
            fullWidth={true}
            icon={'restore'}
            onPress={() => {
              setStartDate(undefined)
              setEndDate(undefined)
              onChange(undefined, undefined)
            }}
            size={'small'}
            title={'Reset'}
          />
        </Box>
      )}
      <Calendar
        disableOffsetDays={true}
        monthHeight={MONTH_HEIGHT}
        firstDayMonday={true}
        startingMonth={'2023-01-01'}
        numberOfMonths={100}
        showsVerticalScrollIndicator={false}
        onPress={setPressedDate}
        startDate={startDate ? new Date(`${startDate}`) : undefined}
        endDate={endDate ? new Date(`${endDate}`) : undefined}
        contentContainerStyle={containerStyles}
        theme={THEME}
      />
    </Box>
  )
}

const styles = StyleSheet.create({
  ContentContainer: {
    paddingTop: 100,
    paddingBottom: 200,
    paddingHorizontal: Presentation.Theme.screenPadding / 2,
  },
})

export default FullScreenCalendar