ReactNative ScrollView 중첩시 발생 에러

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.

ScrollView의 스크롤방향과, 해당 ScrollView 안의 FaltList 스크롤방향과 FlatList 스크롤 방향이 같을때 발생하는 에러입니다.

import React from 'react';
import {Dimensions, Image, Modal, Pressable, Text, TouchableOpacity, View} from 'react-native';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import ReelsCompoennt from './ReelsComponent';
import AntDesign from 'react-native-vector-icons/AntDesign';
import {useDispatch, useSelector} from 'react-redux';
import indexSlice from '../slices';
import {RootState} from '../store/reducer';

function Reels() {
  const videoState = useSelector((state: RootState) => state.index.videoState);
  const dispatch = useDispatch();

  return (
    <Modal animationType="none" transparent={true} visible={videoState}>
      <View
        style={{
          width: Dimensions.get('window').width,
          height: Dimensions.get('window').height,
          backgroundColor: 'black',
          position: 'relative',
        }}>
        <View
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            zIndex: 1,
            paddingHorizontal: wp(5),
          }}>
          <Pressable onPress={() => dispatch(indexSlice.actions.onChangeVideoState(!videoState))}>
            <AntDesign name="arrowleft" style={{fontSize: hp(4), color: 'white'}} />
          </Pressable>
          <Text style={{fontSize: hp(4), fontFamily: 'NotoSansKR-Bold', color: '#fff'}}>Reels</Text>
        </View>
        <ReelsCompoennt />
      </View>
    </Modal>
  );
}

export default Reels;

해당 컴포넌트를 Modal 이라는 react-native를 사용해주니,
해당 에러가 사라지고 정상적으로 작동합니다.