React Native TouchableHighlight onFocus onBlur - reactjs

Question

I am creating a menu for an Android TV, the Menu expands when it get focus, but when moving from one menu item to the other I get a flicker because I can't find a way to make the menu focus independent from the menu item focus.
I've tried to use a Touchable around the Flat list but then i cant move focus to the items.
import { FlatList, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { MaterialIcons } from '#expo/vector-icons';
import React from 'react';
interface MenuListOption {
name: string;
icon: string;
}
interface MenuItemProps {
setMenuFocus: (v: boolean) => void;
item: MenuListOption;
menuFocus: boolean;
}
export const homeLists: MenuListOption[] = [
{
name: 'HOME',
icon: 'home-filled',
},
{
name: 'MOVIES',
icon: 'local-movies',
},
{
name: 'TV SHOWS',
icon: 'movie',
},
];
const MenuItem = ({ setMenuFocus, item, menuFocus }: MenuItemProps): JSX.Element => {
const [focus, setFocus] = React.useState(false);
const onFocus = React.useCallback(() => {
setFocus(true);
setMenuFocus(true);
}, [setMenuFocus]);
const onBlur = React.useCallback(() => {
setFocus(false);
setMenuFocus(false);
}, [setMenuFocus]);
return (
<TouchableHighlight onFocus={onFocus} onBlur={onBlur} style={[styles.item, focus ? styles.itemFocused : null]}>
<View style={styles.itemWrapper}>
<MaterialIcons name={item.icon} size={50} color="red" />
{menuFocus && <Text style={styles.text}>{item.name}</Text>}
</View>
</TouchableHighlight>
);
};
const Menu = (): JSX.Element => {
const [focus, setFocus] = React.useState(false);
const colorsArray = focus ? ['gray', 'gray', 'transparent'] : ['gray', 'gray'];
const renderItem = ({ item }: { item: MenuListOption }) => (
<MenuItem setMenuFocus={setFocus} item={item} menuFocus={focus} />
);
return (
<View style={[styles.wrapper, focus ? styles.wrapperFocused : null]}>
<LinearGradient colors={colorsArray} start={{ x: 0, y: 0.9 }} end={{ x: 1, y: 0.9 }}>
<View style={focus ? styles.logoFocus : styles.logo}>
{focus && <MaterialIcons style={{ paddingRight: 20 }} name={'tv'} size={40} color={'white'} />}
<Text style={[styles.title, focus && styles.textFocus]}>MyApp</Text>
</View>
<FlatList
contentContainerStyle={{ justifyContent: 'center', flex: 1 }}
style={styles.list}
data={homeLists}
renderItem={renderItem}
keyExtractor={(item) => String(item.name)}
/>
</LinearGradient>
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
height: '100%',
position: 'absolute',
top: 0,
zIndex: 1,
left: -200,
transform: [{ translateX: 200 }],
},
title: {
fontSize: 15,
lineHeight: 38,
fontWeight: '400',
textAlign: 'left',
},
wrapperFocused: {
width: 900,
},
logo: {
justifyContent: 'center',
flexDirection: 'row',
marginTop: 20,
},
list: {
flexGrow: 0,
height: '100%',
padding: 10,
},
logoFocus: {
justifyContent: 'flex-start',
flexDirection: 'row',
marginTop: 60,
marginLeft: 20,
},
textFocus: {
fontSize: 35,
},
item: {
maxWidth: 250,
marginBottom: 40,
alignSelf: 'stretch',
left: 0,
padding: 10,
},
itemFocused: {
borderBottomColor: 'yellow',
borderBottomWidth: 5,
},
itemWrapper: {
maxWidth: 250,
flexDirection: 'row',
},
text: {
color: 'white',
fontSize: 28,
lineHeight: 41,
fontWeight: '600',
marginLeft: 50,
marginTop: 5,
},
});
export default Menu;
Here is an animation of the problem:
menu