React Native nextFocusRight Prop on an TouchableOpacity is not working

I'm trying to stop focus propagating from the last element in React Native using nextFocusRight but still, the focus propagates to the next view. According to this pull request, it should be working but still, I'm facing the same issue

My code: App.js

export default class App extends Component {

  render() {
    const data = [];
    for (let i = 0; i < 10; i++)
      data.push(i);

    return (
      <View>
        <View>
          {[1, 2].map(() => (
            <ScrollView horizontal style={{ height: 210 }}>
              {data.map(i => <Item id={i} buttonRef={this.buttonRef} />)}
            </ScrollView>
          ))}

        </View>
      </View>
    );
  }
}

Item.js

export default class Item extends Component {
    myRef = null;

    componentDidMount() {
        const { id } = this.props;
        if (id == 0) {
            this.myRef.setNativeProps({ nextFocusLeft: findNodeHandle(this.myRef) })
        } else if (id == 9) {
            this.myRef.setNativeProps({ nextFocusRight: findNodeHandle(this.myRef) })
        }
    }

    render() {
        const { id } = this.props;
        return (
            <TouchableOpacity
                key={id}
                ref={(c) => this.myRef = c}
            >
                <View
                    style={{
                        backgroundColor: 'grey',
                        width: 100,
                        height: 100,
                    }}
                >
                    <Text style={{ fontSize: 60 }}>{id}</Text>
                </View>
            </TouchableOpacity>
        )
    }

}

What is wrong here? Does anybody knows?