ERROR React Native - VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

Question

I'm using a library called PhoneInput from "react-native-phone-number-input." This is the code below:

<View>
            <SafeAreaView style={styles.wrapper}>
              <PhoneInput
                ref={phoneInput}
                returnKeyType="go"
                defaultValue={value}
                defaultCode="KW"
                layout="second"
                placeholder="Recipient's Number"
                onChangeText={(text) => {
                  setValue(text);
                }}
                onChangeFormattedText={(phoneNo) => {
                  setRecipientPhoneNo(phoneNo);
                  setCountryCode(
                    phoneInput.current?.getCountryCode() || ""
                  );
                }}
                disabled={disabled}
                textInputProps={{ returnKeyType: "done" }}
                countryPickerProps={{ disableNativeModal: true }}
                textInputStyle={{ height: 30 }}
                containerStyle={styles.phoneNoCardInput}
                inputStyle={{
                  backgroundColor: "lightblue",
                  color: "red",
                }}
                textContainerStyle={{ paddingVertical: 10 }}
                withShadow
                //  autoFocus
              />
            </SafeAreaView>
          </View>

The error: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead. at node_modules/react-native/Libraries/Lists/VirtualizedList.js:1115:14 in ScrollView.Context.Consumer.props.children