如何在React中实现动态表单以生成指定结构的联系人号码数组

我正在学习React，想要实现如下结构的对象：

"Phones": [
  {
    "Type": "Mobile",
    "Phone_Number": "6546543"
  },
  {
    "Type": "Home",
    "Phone_Number": "6546543"
  }
]

我经过调研后参考了《ReactJS - Dynamically Adding Multiple Input Fields》视频进行开发。
这些值将从表单中收集，用户可以按需添加任意多组号码。我编写的代码如下：

render() {
  return (
    <div>
      <h1>The Form</h1>
      <label>Contact</label>
      {this.state.phones.map((phone, index) => {
        return (
          <div key={index}>
            <input onChange={(e) => this.handleChange(e)} value={phone} />
            <select>
              {this.phoneTypes.map((phoneType, index) => {
                return (
                  <option key={index} value={phoneType}>
                    {phoneType}
                  </option>
                );
              })}
            </select>
            <button onClick={(e) => this.handleRemove(e)}>Remove </button>
          </div>
        );
      })}
      <hr />
      <button onClick={(e) => this.addContact(e)}>Add contact</button>
      <hr />
      <button onClick={(e) => this.handleSubmit(e)}>Submit</button>
    </div>
  );
}

我没有在此粘贴完整代码，已经做了可在线运行的示例方便调试。目前代码运行不符合预期，恳请大家帮忙排查问题。

内容的提问来源于stack exchange，提问作者Tanzeel