What should I do to enable automatic scrolling for a FlatList displaying images in a 150 x 150 square in React Native?

Question

I have code that creates the flatlist and displays images in a 150 x 150 square, i cant however get automatic scrolling to work.

What im expecting to happen is more the list of different images to be displayed horizontally and slowly scrolled through to see all the different images.

Here is my code

CarouselAutoScroll.js

import { useCallback, useEffect, useRef, useState } from "react";
import { Dimensions, Text } from "react-native";
import { FlatList, Image, StyleSheet } from "react-native";

const width = Dimensions.get("screen").width;

export const CarouselAutoScroll = ({ data, interval }) => {
    const imageRef = useRef();
    const [active, setActive] = useState(0);
    const indexRef = useRef(active);
    indexRef.current = active;

    useInterval(() => {
        console.log("wtf");
        if (active < Number(data?.length) - 1) {
            setActive(active + 1);
        } else {
            setActive(0);
        }
    }, interval);

    useEffect(() => {
        console.log(active)
        imageRef.current.scrollToIndex({ index: active, animated: true });
    }, [active]);

    const onViewableItemsChangedHandler = useCallback(
        ({ viewableItems, changed }) => {
            if (active != 0) {
                setActive(viewableItems[0].index);
            }
        },
        []
    );

    return (
        <FlatList
            showsHorizontalScrollIndicator={false}
            onViewableItemsChanged={onViewableItemsChangedHandler}
            viewabilityConfig={{
                itemVisiblePercentThreshold: 50,
            }}
            ref={imageRef}
            pagingEnabled
            data={data}
            horizontal
            renderItem={({ item, index }) => (
                <Image
                    key={index}
                    source={item.image}
                    resizeMode={"contain"}
                    style={{
                        flex: 1,
                        height: 150,
                        width: 150,
                    }}
                />
            )}
            style={{ width: '100%' }}
        />
    );
};

const useInterval = (callback, delay) => {
    const savedCallback = useRef();

    useEffect(() => {
        savedCallback.current = callback;
    }, [callback]);

    useEffect(() => {
        const tick = () => {
            savedCallback.current();
        };
        if (delay !== null) {
            let id = setInterval(tick, delay);
            return () => clearInterval(id);
        }
    }, [delay]);
};

And here is how ive implemented it in home.js

import { StyleSheet, Button, View, ScrollView, Image, ImageBackground, Dimensions, Text, Pressable } from 'react-native';

//images
import image365 from '../assets/partners/365.png';
import imageBitco from '../assets/partners/bitco.png';
import imageBS from '../assets/partners/bs.png';
import imageDCData from '../assets/partners/dcdata.png';
import imageECN from '../assets/partners/ecn.png';
import imageEPSON from '../assets/partners/epson.png';
import imageESET from '../assets/partners/eset.png';
import imageHPE from '../assets/partners/hpe.png';
import imageMIKRO from '../assets/partners/mikro.png';
import imageMSP from '../assets/partners/msp.png';
import imageNABLE from '../assets/partners/n-able.png';
import imageOCULU from '../assets/partners/oculu.png';
import imageSCF from '../assets/partners/scf.png';
import imageSMB from '../assets/partners/smb.png';
import imageSOPHOS from '../assets/partners/sophos.png';
import imageStreamGroup from '../assets/partners/stream-group.png';
import imageVODACOM from '../assets/partners/vodacom.png';
import { CarouselAutoScroll } from "../models/test";
const partners = [
    { url: "1", image: image365 },
    { url: "2", image: imageBitco },
    { url: "3", image: imageBS },
    { url: "4", image: imageDCData },
    { url: "5", image: imageECN },
    { url: "6", image: imageEPSON },
    { url: "7", image: imageESET },
    { url: "8", image: imageHPE },
    { url: "9", image: imageMIKRO },
    { url: "10", image: imageMSP },
    { url: "11", image: imageNABLE },
    { url: "12", image: imageOCULU },
    { url: "13", image: imageSCF },
    { url: "14", image: imageSMB },
    { url: "15", image: imageSOPHOS },
    { url: "16", image: imageStreamGroup },
    { url: "17", image: imageVODACOM }
];

export function HomeScreen({ navigation }) {
    return (
        <View>
            <CarouselAutoScroll data={partners} interval={1000} />
        </View>
    );
}
const styles = StyleSheet.create({
    
});