calendar react native

<Calendar
          dayComponent={({ date, state, marking }) => {
            const timeSheet = data.timesheets.find(
              (timesheet: any) => timesheet.duty_start_time == date.dateString
            );
            let backgroundColor = "";

            if (timeSheet) {
              switch (timeSheet.is_absent) {
                case true:
                  backgroundColor = "$red5Light";
                  break;
                case false:
                  backgroundColor = "$green5Light";
                  break;
                default:
                  backgroundColor = "$green5Light";
              }
            }

            return (
              <View>
                {/* <Circle
                  size={45}
                  backgroundColor={backgroundColor}
                  elevation="$4"
                > */}
                <YStack
                  alignContent="center"
                  justifyContent="center"
                  alignItems="center"
                >
                  <Text>{date.day}</Text>
                  <Text fontSize={11}>{timeSheet ? timeSheet.client : ""}</Text>
                </YStack>
                {/* </Circle> */}
              </View>
            );
          }}
          style={{
            borderWidth: 1,
            borderColor: "gray",
            // height: 300,
            width: 350,
          }}
          markedDates={{
            "2024-06-16": {
              selected: true,
              marked: true,
              selectedColor: "blue",
              textColor: "green",
            },
            "2024-06-17": { marked: true },
            "2024-06-18": {
              selected: true,
              marked: true,
              dotColor: "white",
              activeOpacity: 0,
              selectedColor: "red",
            },
            "2024-06-19": { disableTouchEvent: true },
          }}
        />