a bug in my react native flatlist keeps bouncing to top without ability to continue scrolling

I'm trying to build a flatlist of svg item, where I control position of each item (position='absolute')

However, my flatlist is not giving option to scroll down, it always keep bouncing to the top the moment I untouch the screen

This is how my screen looks like, every hexagon is an item in the flatlist

screen code:

return (
    <View style={styles.container}>
      <ImageBackground source={require('../../assets/edu_bg.png')} style={styles.image}>
        <View style={{width: '100%', height: '25%'}}>
        <ImageBackground source={require('../../assets/edu_top_bg.png')} style={{height:'100%', width: '100%'}}>
          <Text style={styles.welcome_txt}>screen 3</Text>
          <FlatList 
            style={{marginBottom: 10, height: 40}}
            horizontal
            data={Categories}
            renderItem={(item, index) => renderCategory(item, index)}
            keyExtractor={item => generate()}
            showsHorizontalScrollIndicator={false}
          ></FlatList>
        </ImageBackground>
      </View>
        <FlatList 
          style={{marginBottom: 45}}
          data={Data}
          renderItem={(item, index) => renderEvent(item, index)}
          keyExtractor={item => generate()}
          >
        </FlatList>
      <StatusBar style="auto" />
      </ImageBackground>
    </View>
  );

don't mind the first flatlist, only the second one. (width="210" height="190")

Rendering item code:

const renderEvent = ({ item, index }) => {
    // console.log('rendering', item, 'index ', index)
    const i = index % 2;
    const flex_p = i === 0 ? 'flex-start' : 'flex-end'
    const top_p = index * 95;
    const c = index%3;
    console.log(i, flex_p, top_p, i_2_color[c])

    return (
          <View style={{marginHorizontal: 10}}>
            <TouchableOpacity style={{flex:1, alignSelf:flex_p, position:'absolute', top:top_p}} onPress={() => console.log(item, index)}>
            <CustomEvent color_map={i_2_color[c]} >
            </CustomEvent>
            </TouchableOpacity>
          </View>
      )};

where CustomEvent is the hexagn svg one Please don't mind the bad code written above (style in the view part, calculating that variables and their names..., im just trying stuff out)

styles:

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    welcome_txt: {
      fontWeight:"bold",
      fontSize:50,
      color:"#3589d4",
      marginTop: 50,
      textAlign: 'center',
    },
    image: {
      flex: 1,
      width: '100%',
      height: '100%',
      justifyContent: "center"
    },
    top_image: {
      flex: 1,
      width: '100%',
      height: '20%',
    }
  });

I have checked and all solutions where to remove flex=1 from the flatlist itself, however, my flatlist style only is margin, nothing else.

Any help is appreciated, I have spent a lot of time trying to figure our what caused the issue but with no success

Thanks in advance!!