Как сохранить реквизит родителя в дочернем компоненте?

Я изучаю React Naive, составляя список задач.
Я хочу изменить приложение ToDo на список комментариев, в котором есть комментарии друг к другу.
Первая попытка сработала правильно:

Первая попытка

Но все пользователи изменились после второй попытки.

Вторая попытка

Теперь родитель передает реквизиты дочерним с помощью {this.state.pick} и {this.state.key} , но дочерний элемент изменится, если реквизиты родителя изменятся.

Есть ли способ изменить родительские реквизиты без изменения дочерних реквизитов?

Комментарий.js:

export default class CommentIndex extends Component<{}> {

  constructor(props) {
    super(props);

    this.state = {
      head: [],
      list: [],
      pick: [],
    };
  }

  _onPress = (text) => {
    const list = [].concat(this.state.list);

    list.push({
      key: Date.now(),
      text: text,
      done: false,
    });

    this.setState({
      list,
    });
  }

  render() {
    const {
      head,
      list,
      pick,
    } = this.state;

    var data = [["User1", "User2", "User3"],];

    return (
      <View style = {styles.container}>
        <View style = {styles.dropdownHeader}>
        <View style = {styles.dropdown}>
          <DropdownMenu
            style = {{flex: 1}}
            bgColor = {'white'}
            tintColor = {'#666666'}
            activityTintColor = {'green'}
            handler = {(selection, row) => this.setState({head: data[selection][row]})}
            data = {data}
          >
            <View style = {styles.userHeader}>
              { this.state.head === 'User1' && <User1 /> }
              { this.state.head === 'User2' && <User2 /> }
              { this.state.head === 'User3' && <User3 /> }
            </View>
          </DropdownMenu>
        </View>
        </View>
      <Text>To Do</Text>
        <View style = {styles.main}>
          <View style = {styles.post}>
            <View style = {styles.dropdown}>
              <View style = {{height: 0}} />
              <DropdownMenu
                bgColor = {'white'}
                tintColor = {'#666666'}
                activityTintColor = {'green'}
                handler = {(selection,row) => this.setState({pick: data[selection][row]})}
                data = {data}
              >
                <View style = {styles.user}>
                  { this.state.pick === 'User1' && <User1_photo /> }
                  { this.state.pick === 'User2' && <User2_photo /> }
                  { this.state.pick === 'User3' && <User3_photo /> }
                </View>
              </DropdownMenu>
            </View>
            <View style = {styles.postinput}>
              <CommentInput onPress = {this._onPress} />
            </View>
          </View>
          <View style = {styles.CommentListContainer}>
            <FlatList
              style = {styles.CommentList}
              data = {list}
              renderItem = {({ item }) => <CommentItem {...item} head = {this.state.head} pick = {this.state.pick}/>}
            />
          </View>
        </View>
      </View>
    );
  }
}

КомментарийВвод:

export default class CommentInput extends Component {
    constructor(props) {
        super(props);

        this.ref = {};
    }

    _onPress = () => {
        this.props.onPress(this.ref._lastNativeText);
        this.ref.setNativeProps({ text: '' });
    }

    render() {
        const {
            onPress,
        } = this.props;

        return (
            <View style = {styles.container}>
                <TextInput
                    style = {styles.textInput}
                    ref = {(ref) => { this.ref = ref; }}
                />
                <TouchableOpacity
                    style = {styles.button}
                    onPress = {this._onPress}
                >
                    <Text style = {styles.buttonText}>追加</Text>
                </TouchableOpacity>
            </View>
        );
    }
}