react native gives TypeError: Cannot read property ‘useRef’ of null,

im new to react native so i really don’t know why this issue is coming up. if u need any additional info feel free to ask. im trying to build a navigation system similar to windows phone where we can swipe to the next screen.

here is my code

import { StyleSheet, Text, View, FlatList, TouchableOpacity, Dimensions } from 'react-native'
import React , {useState,useRef} from 'react'

const allData = [
    {name:'Explore',id:'1'},
    {name:'Trending',id:'2'},
    {name:'Post',id:'3'},
    {name:'Messages',id:'4'},
    {name:'Marketplace',id:'5'}
]
const reff = useRef()
const [index,setIndex] = useState(2)
const spacing = 10;


export default function topDynamicBar() {
  return (
    <View style ={styles.container}>
      <FlatList
      ref={reff}
      initialScrollIndex={index}
      keyExtractor={(item)=>item.id}
      data={allData}  
      renderItem={({item, index: findex})=>(<Text style={styles.items}>{item.name}</Text>)}
      horizontal
      showsHorizontalScrollIndicator={false}
      />
    </View>
  )
}

const styles = StyleSheet.create({
    container:{
        backgroundColor:'#000000'
    },
    items:{
        padding:2,
        fontSize:30,
        height: "auto",
        margin:10,
        borderColor:'#fff',
        borderWidth:2,
        borderRadius: spacing
        

    }

})