Текущее значение не изменится даже после того, как я выберу из выпадающего списка пункт «реагировать на узел js firebase cloud firestore».Есть идеи как решить?

Question

Если я помещу projNo: user.projNo в 'componentDidMount', я не смогу изменить значение projNo1, projNo2 и projNo3, но оно показало текущее значение над списком в раскрывающемся списке в качестве значения по умолчанию.

Но если я удалю его, текущее значение не будет отображаться, но его можно выбрать из раскрывающегося списка.Проблема в том, что он сохранил значение в 3 новых полях вместо значений в поле projNo.

Итак, мне нужно, чтобы он мог 1. показать текущее значение и 2. выбрать из спискаи 3. сохранить его в дочернем элементе projNo, который является "projNo1, projNo2 и projNo3"

Изображение базы данных

import React, { Component } from 'react';
import fire from '../config/Fire';
import { Link } from 'react-router-dom';
import Navigation from '../components/Navigation';

class EditUser extends Component {

  constructor(props) {
    super(props);
    this.unsubscribe = null;
    this.state = {
      key: '',
      authority: '',
      name: '',
      email: '',
      password: '',
      projNo: {projNo1: '', projNo2: '', projNo3: ''},
      project: []
    };
  }

  onCollectionUpdate = (querySnapshot) => {
    const project = [];
    querySnapshot.forEach((doc) => {
      const { projNo } = doc.data();
      project.push({
        key: doc.id,
        doc, // DocumentSnapshot
        projNo
      });
    });
    this.setState({
      project
    });
  }

  componentDidMount() {
    const ref = fire.firestore().collection('user').doc(this.props.match.params.id);
    ref.get().then((doc) => {
      if (doc.exists) {
        const user = doc.data();
        this.setState({
          key: doc.id,
          authority: user.authority,
          name: user.name,
          email: user.email,
          password: user.password,
          //projNo: {projNo1: user.projNo.projNo1, projNo2: user.projNo.projNo2, projNo3: user.projNo.projNo3}
          projNo: user.projNo
        });
      } else {
        console.log("No such document!");
      }
    });

    this.unsubscribe = fire.firestore().collection('project').onSnapshot(this.onCollectionUpdate);
  }

  onChange = (e) => {
    const state = this.state
    state[e.target.name] = e.target.value;
    this.setState({user:state});
  }

  onSubmit = (e) => {
    e.preventDefault();

    const { authority, name, email, password, projNo1, projNo2, projNo3 } = this.state;

    const updateRef = fire.firestore().collection('user').doc(this.state.key);
    updateRef.set({
      authority,
      name,
      email,
      password,
      projNo: [projNo1,projNo2,projNo3]
    }).then((docRef) => {
      this.setState({
        key: '',
        authority: '',
        name: '',
        email: '',
        password: '',
        projNo: { projNo1: '', projNo2: '', projNo3: '' }
      });
      this.props.history.push("/show/"+this.props.match.params.id)
    })
    .catch((error) => {
      console.error("Error adding document: ", error);
    });
  }

  render() {
    return (
    <div>
    <Navigation />

      <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">
            <p></p>
              EDIT USER
            </h3>
          </div>
          <div class="panel-body">
            <h4><Link to={`/show/${this.state.key}`} class="btn btn-primary">Cancel</Link></h4>
            <form onSubmit={this.onSubmit}>
              <div class="form-group">
                <label for="authority">Authority: </label>
                <input type="text" class="form-control" name="authority" value={this.state.authority} onChange={this.onChange} placeholder="Authority" required/>
              </div>
              <div class="form-group">
                <label for="name">Full name: </label>
                <input type="text" class="form-control" name="name" value={this.state.name} onChange={this.onChange} placeholder="Full name" />
              </div>
              <div class="form-group">
                <label for="email">Email: </label>
                <input type="text" class="form-control" name="email" value={this.state.email} onChange={this.onChange} placeholder="Email" required/>
              </div>
              <div class="form-group">
                <label for="password">Password: </label>
                <input type="password" class="form-control" name="password" value={this.state.password} onChange={this.onChange} placeholder="Password" required/>
              </div>

              <div class="form-group">
                <label for="projNo">Project number: </label>
                <select name="projNo1" value={this.state.projNo.projNo1} onChange={this.onChange}>
                    <option value="" hidden>Select project</option>
                    <option value="" >None</option>
                  {this.state.project.map(project =>
                      <option value={project.projNo.value}> {project.projNo} </option>
                  )}
                </select>
                <select name="projNo2" value={this.state.projNo.projNo2} onChange={this.onChange}>
                    <option value="" hidden>Select project</option>
                    <option value="" >None</option>
                  {this.state.project.map(project =>
                      <option value={project.projNo.value}> {project.projNo} </option>
                  )}
                </select>
                <select name="projNo3" value={this.state.projNo.projNo3} onChange={this.onChange}>
                    <option value="" hidden>Select project</option>
                    <option value="" >None</option>
                  {this.state.project.map(project =>
                      <option value={project.projNo.value}> {project.projNo} </option>
                  )}
                </select>
              </div>

              <button type="submit" class="btn btn-success">Submit</button>
            </form>
          </div>
        </div>
      </div>

    </div>
    );
  }
}

export default EditUser;