VirtualizedLists should never be nested inside plain ScrollViews

Question

I get the error VirtualizedLists should never be nested inside plain ScrollViews when I open my DropDown and cannot select or scroll the DrowDown dialog, I know approximately what the problem is, could someone please tell me the reason or show me the solution?

<ScrollView>
  {formSchema.map((field, index) => {
    const { name, label, type } = field;
    if (type === 'select') {
      return (
        <View style={styles.sropsownWrapper} key={index}>
          <Dropdown
          />
        </View>
      );
    }
    if (type === 'input') {
      return (
        <View style={styles.wrapper}>
          <Input
            name={name}
            label={label}
          />
        </View>
      );
    }
  })}
  <View
    style={{
      ...styles.controls,
      backgroundColor: '#242424',
    }}>
    <View style={styles.wrapper}>
      <Button onPress={() => ()} />
    </View>
    <View style={styles.wrapper}>
      <Button  text="Go" />
    </View>
  </View>
</ScrollView>

Answer 1

The documentation suggests adding listMode="MODAL" or listMode="SCROLLVIEW" to avoid the issue.