CalendarStrip Style changes when setting scrollable to true

Question

So I am making a CalendarStrip from react-native-calendar-strip. Basically when I am setting the scrollable to true in the CalendrStrip, the height of the strip gets shortened and ruins the look of the CalendarStrip.

So this is the CalendarStrip without scrollable set to true.

This is when I set the scrollable to true. As you can see, the height of the Strip is reduced and that's why the highlighted date is getting cut off. I do not understand why this is happening.

<View style={styles.listContainer}>
<CalendarStrip
            scrollable={true}
            scrollToOnSelectedDate={true}
            ref={calenderRef}
            headerText={' '}
            selectedDate={newdate}
            onDateSelected={value => {
              setDate(moment(value).format('YYYY-MM-DD'));
              setSelectedMonth(value.month());
              setSelectedYear(value.year());
              console.log(newdate);
            }}
            getSelectedDate={value => console.log(value)}
            daySelectionAnimation={{
              type: 'border',
              duration: 200,
              borderWidth: 1,
              borderHighlightColor: 'white',
            }}
            calendarHeaderStyle={{
              fontSize: 1,
              fontFamily: 'Roboto-Regular',
              color: 'black',
              alignSelf: 'flex-start',
            }}
            //   iconLeftStyle={{position:"absolute",top:-70}}
            //  iconRightStyle={{color:'white',backgroundColor:colors.primaryTheme,}}
            style={{
              width: '98%',
              height: 150,
              paddingTop: 20,
              paddingBottom: 10,
            }}
            startDate={moment(date)}
            highlightDateContainerStyle={{
              backgroundColor: colors.secondary,
              paddingVertical: 10,
              height: 80,
              color: 'white',
            }}
            dayContainerStyle={{paddingVertical: 10}}
            highlightDateNumberStyle={{
              color: colors.white,
              fontFamily: 'Roboto-Medium',
              fontSize: 14,
            }}
            highlightDateNameStyle={{
              color: colors.white,
              fontFamily: 'Roboto-Medium',
              fontSize: 12,
              marginHorizontal: 1.5,
              padding: 5.5,
              borderTopEndRadius: 20,
              borderTopLeftRadius: 20,
              borderTopRightRadius: 20,
            }}
            highlightDateNumberContainerStyle={{
              backgroundColor: colors.primaryTheme,
              borderRadius: 40,
              padding: 4,
              marginHorizontal: 10,
              minWidth: 30,
              minHeight: 30,
            }}
          />
        </View>