FlatList, Synced Scroll Views, and React Native

Question

I want to make a dynamic list of scrollviews, meaning the user can change the amount of scrollviews in the list. I have my FlatList code, I have my reusable component code. The flatlist renders my scrollviews, but they don't sync up like they would if I hadn't made a reusable component (meaning, add like 10 scrollviews and use my method to have them scroll together). In fact, they barely move at all independently. I need a way to have everything move, and everything move together. Thank you.

Screen Code:

const Habits = ({ route }) => {

const [habits, setHabits] = useState([])

    const addHabit = () => {
        let items = []
        items.push({name: "hello"})
        items.push({name: "goodbye"})

        setHabits(items)

    }

    
    useFocusEffect(useCallback(() => {
        addHabit() \\ just for testing purposes, I have added my own habits here
        }, [])
    )

    return (
        <SafeAreaView>
           <FlatList data={habits} renderItem={({item}, index) => {
             return <Habit text={item.name} key={index}/>
           }}/>
        </SafeAreaView>   
    )
}


export default Habits

Habit Code (Bullet Journal Project):

const Habit = (props) => {
    const name = props.text

    const [scroll, setScroll] = useState(0)

    const scrollViewRef = useRef();
    scrollViewRef.current?.scrollTo({x: scroll, y: 0, animated: false})


    return(
        <View style={{flexDirection: 'row', marginVertical: 10, flex: 1}}>
            <Text style={{alignItems: 'center', marginHorizontal: 3, fontSize: 18, width: 100}}>{name}</Text>
            <ScrollView showsHorizontalScrollIndicator={false} horizontal={true} ref={scrollViewRef} 
            onScroll={(e) => {
                setScroll(e.nativeEvent.contentOffset.x)
            }}>
                 <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>1</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>2</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>3</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>4</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>5</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>6</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>7</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>8</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>9</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>10</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>11</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>12</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>13</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>14</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>15</Text>
                </TouchableOpacity>

                <TouchableOpacity style={{margin: 1, height: 30, width: 30, backgroundColor: colors.reset}}>
                    <Text>16</Text>
                </TouchableOpacity>
            </ScrollView>
        </View>
    )
}

export default Habit