React Native Android TV focus on Flatlist item

Question

Hello I am using React Native 62.2 and have managed to get the TVEventHandler working. On the same component I am using a button and a Flatlist.The focus is moving using D Pad from button to the Flatlist and when repeatedly clicking, i am able to get event fired when i am using D Pad and able to get events fired for focus, blur, up, down which i presume is for the Flatlist items as it scrolls down after some clicks and same way goes up when pressed the up button.

My code for the item of the Flatlist is :

    export default class CountryCodeListItem extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            focused: false
        }
    }

    onFocus() {
        console.log("focussed");
        this.setState({
            focused: true
        })
    }

    onBlur() {
        this.setState({
            focused: true
        })
    }

    render() {
        const { item, index, selectedIndex } = this.props;
        console.log(index, selectedIndex, this.state.focused);
        return (
            <TouchableOpacity
                key={index}
                style={[styles.listitem, this.state.focused ? styles.listitemFocus : {}]}
                //hasTVPreferredFocus={(index === selectedIndex) ? true : false}
                onFocus={() => { this.onFocus }}
                onBlur={() => { this.onBlur }}
                onPress={() => { this.props.selectCountryCode(item, index) }}
            >
                <SvgUri
                    width="25"
                    height="15"
                    uri={item.cn_flag}
                />
                <Text style={styles.countryName}>{item.cn.trim()} ({item.dial_code})</Text>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({

    countryName: {
        fontSize: globalstyles.fontMedium.fontSize,
        color: globalstyles.subTitleColor.color,
        marginLeft: 50,
        position: 'absolute'
    },
    listitem: {
        padding: 10,
        height: 40,
        alignItems: 'center',
        flexDirection: 'row'
    },
    listitemFocus: {
        backgroundColor: globalstyles.highlightColor.color
    }
})

Can you help me as how can the focus be managed for the flatlist item where by on focus, the background colour gets changed (this happens for the button placed above the Flatlist) and on blur it should get deselected.