How to keep FlatList from re-rendering

Question

const BrandTab = React.useCallback( _ => {
        console.log('REREREE')
        return (
            <View style={{
                flex: 1,
                padding: 10
            }}>
                <FlatList
                    data={brands}
                    renderItem={({ item, index }) => {
                        return (
                            <TouchableOpacity
                                style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}
                                onPress={_ => {
                                    const brandDup = [...selectedBrand];
                                    if (brandDup.includes(item.brandID)) {
                                        const i = brandDup.indexOf(item.brandID);
                                        brandDup.splice(i, 1);
                                        setSelectedBrand(brandDup);
                                        setFilterPayload({
                                            ...filterPayload,
                                            brandIds: brandDup
                                        })
                                    } else {
                                        brandDup.push(item.brandID);
                                        setSelectedBrand(brandDup);
                                        setFilterPayload({
                                            ...filterPayload,
                                            brandIds: brandDup
                                        })
                                    }
                                }}
                            >
                                {selectedBrand.includes(item.brandID) ? <Image
                                    source={require('../../assets/icons/check.png')}
                                    tintColor = { isDarkMode ? "white" : 'black' }
                                    style={{
                                        resizeMode: 'contain',
                                        width: 18,
                                        height: 13,
                                        tintColor: isDarkMode ? 'white' : null
                                    }}
                                /> : <View
                                    style={{
                                        width: 20,
                                        height: 20,
                                        borderRadius: 50,
                                        borderWidth: 1,
                                        borderColor: colors.primaryColor,
                                    }}
                                />}
                                <View
                                    style={{
                                        flexDirection: 'row',
                                        justifyContent: 'space-between',
                                        flex: 1,
                                        borderBottomWidth: 1,
                                        borderColor: '#D0D0D0',
                                        padding: 5,
                                    }}>
                                    <Text
                                        style={{
                                            color: '#676767',
                                            fontSize: 18,
                                            marginLeft: 10,
                                            color: selectedBrand.includes(item.brandID) ? isDarkMode ? "white" :'#121212' : '#747474'
                                        }}>
                                        {item.name}
                                    </Text>
                                    {/* <Text style={{ fontSize: 18, color: '#676767' }}>290</Text> */}
                                </View>
                            </TouchableOpacity>
                        );
                    }}
                    extraData={selectedBrand}
                />
            </View>
        );
    }, [
        brands,
        selectedBrand
    ])

This is a list of brands in filter page, which renders a list of brands using a FlatList.Each time I click on the FlatList item, the entire list is re-rendered and automatically scrolls to the top. How can I keep this from happening. I have used useCallback, but to no avail. I can literally see the list flicker after I click any of its item.