【React.Native】checkBoxのListが全て変更されるのを解除したい。

Question

React.Nativeで画面を作成していた際に、分からない点がありましたので、質問をさせていただきます。

解決できる方がいらっしゃいましたら、お助けいただきたいです。

<解決したい問題>
・子要素の<checkBox.js>は親の<oya.js>からpropsで情報を受け取ります。
作成した<checkBox>をmapを使用してlistにはできたのですが、checkBoxを1つ変更すると全てのチェックが実行されます。全て同じ値を使っているために、このようになっているのは分かるのですが、具体的にどのようにすれば上手く動くのかが分かりません。

解決方法が分かる方がいらっしゃいましたら、何卒よろしくお願いいたします。

※ここでは、公式から提供されているCheckBoxではなく、自前で<TouchableOpacity>を使用して、CheckBoxを作成しています。

oya.js

class oya extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOn: false,
    };
  
  render() {
    const checkBoxList = [
      'AAAAAA',
      'BBBBBB',
      'CCCCCC',
    ];
    return (
      {checkBoxList.map((data, index) => {
        return (
          <View
            <CheckBox
               isOn={this.state.isOn}
               onPress={() => {
                 this.setState({isOn: !this.state.isOn});
               }}
             />
             <Text>{data}</Text>
           </View>
          );
     })}              
  }
}

const mapStateToProps = state => {
  return {};
};

const mapDispatchToProps = dispatch => {
  return {};
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(oya);

checkBox.js

const CheckBox = props => {
  return (
    <TouchableOpacity
      isOn={props.isOn}
      onPress={() => {
        props.onPress(props.isOn);
      }}
      style={[
        {borderWidth: props.isOn ? 0 : 1.5},
        {backgroundColor: props.isOn ? Colors.link : Colors.white},
      ]}
    />
  );
};
export default CheckBox;