react-native-calendar: apply marking type period in custom day component

Question

I need to override the day component because I want to use my own custom day component to the calendar. I need to achieve like below image but am unable to find a way to implement such a design using the custom day component.

if we don't override the day component like the below code then we successfully achieve like above design.

<CalendarList
      markingType={'period'}
      markedDates={{
        '2021-12-15': { marked: true, dotColor: '#50cebb' },
        '2021-12-16': { marked: true, dotColor: '#50cebb' },
        '2021-12-17': {
          startingDay: true,
          color: '#50cebb',
          textColor: 'white',
        },
        '2021-12-18': { color: '#70d7c7', textColor: 'white' },
        '2021-12-19': {
          color: '#70d7c7',
          textColor: 'white',
          marked: true,
          dotColor: 'white',
        },
        '2021-12-20': { color: '#70d7c7', textColor: 'white' },
        '2021-12-21': { endingDay: true, color: '#50cebb', textColor: 'white' },
      }}
    />

But if we override the day component then the markingType period is not worked.

 <CalendarList
      markingType={'period'}
      markedDates={{
        '2021-12-15': { marked: true, dotColor: '#50cebb' },
        '2021-12-16': { marked: true, dotColor: '#50cebb' },
        '2021-12-17': {
          startingDay: true,
          color: '#50cebb',
          textColor: 'white',
        },
        '2021-12-18': { color: '#70d7c7', textColor: 'white' },
        '2021-12-19': {
          color: '#70d7c7',
          textColor: 'white',
          marked: true,
          dotColor: 'white',
        },
        '2021-12-20': { color: '#70d7c7', textColor: 'white' },
        '2021-12-21': { endingDay: true, color: '#50cebb', textColor: 'white' },
      }}
      dayComponent={({ date, state }) => {
        return (
          <TouchableOpacity style={{ backgroundColor: 'red' }}>
            <Text
              style={{
                textAlign: 'center',
                color: state === 'disabled' ? 'gray' : 'black',
              }}
            >
              {date.day}
            </Text>
          </TouchableOpacity>
        );
      }}
    />

My working Environment:-

"react-native": "0.64.1",
"react-native-calendars": "^1.1266.0",
 Platform: android/iOS