How to make an item scrollable when its is already scrollable – React native

This is my code for react native for a carousel its a slider type thingy. I want the slider to scroll aswell with the other components but its not working as scroll view has already been used.

import React, { useState } from "react";
import { SafeAreaView, StyleSheet, ScrollView, Text, Dimensions, View, Image } from "react-native";

function slider(){
  
const images = [
    'https://iili.io/yzQepI.png',
    'https://iili.io/yzQvIt.png'
]

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height
const Slider = () =>{
  
    
    const [imgActive, setimgActive] = useState(0);

    onchange = (nativeEvent)=>{
      if(nativeEvent){
        const slide = Math.ceil(nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width);
        if(slide != imgActive){
            setimgActive(slide);
        }
      }
    }    

    return(
      
    <SafeAreaView style={styles.container}>
    <View style={styles.wrap}>
       <ScrollView
       onScroll={({nativeEvent}) => onchange(nativeEvent)}
       showsHorizontalScrollIndicator={false}
       pagingEnabled
       horizontal
       style={styles.wrap}
       >
       {
        images.map((e,index) =>
        <Image
            key={e}
            resizeMode='stretch'
            style={styles.wrap}
            source={{uri: e}}
        />
        )
       }

       </ScrollView>
       
       <View style={styles.wrapDot}>
        {
            images.map((e,index) =>
              <Text 
                key={e} 
                style={imgActive == index ? styles.dotActive : styles.dot}
              >
                 ●
              </Text>            
            )
        }
       </View>

    </View>
    
    </SafeAreaView>
    )
    }

const styles = StyleSheet.create({
    container:{
        flex:1
    },
    wrap:{
        width: WIDTH,
        height: HEIGHT * 0.25
    },
    wrapDot: {
        position: 'absolute',
        bottom: 0,
        flexDirection:'row',
        alignSelf: 'center'
    },
    dotActive:{
      margin: 3,
      color: 'black'
    },
    dot: {
        margin: 3,
        color: 'white'
    }

})

}
export default Slider;

I have to make it scrollable vertically too but I have tried many ways its not working