Ошибка обработки нескольких списков столбцов в React.js

Здесь у меня есть список с двумя полями - имя и тип. Я пытаюсь добавить строки этих двух элементов и сохранить их в состоянии, чтобы соответствующее имя и тип находились в одном объекте внутри столбцов состояния, которые представляют собой массив объектов. Но после опции добавления, то есть в функции handleColumnChange, в массиве столбцов сохраняется только атрибут type. Я подумал, что неправильно использую оператор присваивания, но я не могу понять, как взять два из этих входных данных и обновить состояние одновременно. Любая помощь относительно того, как с этим справиться, будет оценена по достоинству.

import React, { Component } from 'react'
class App extends Component {
  constructor () {
   super()
   this.state = {
    columns: [{ name: '' ,type:''}],
   }
  }

  handleColumnChange = (idx) => (event) => {
   const newColumns = this.state.columns.map((column, sidx) => {
   if (idx !== sidx){
    return column;
   } else{
    let name,type;
    if (event.target.name === "name"){
      name=event.target.value;
    }
    if (event.target.name === "type")
      type=event.target.value;

    return { ...column, name: name, type:type };
   }
  });

  this.setState({ columns: newColumns });
 }

handleSubmit = (evt) => {
 const { columns } = this.state;
 alert(JSON.stringify(this.state));
}

handleAddColumn = () => {
 this.setState({ columns: this.state.columns.concat([{ 
   name:'',type:''}]) });
  }

 handleRemoveColumn = (idx) => () => {
   this.setState({ columns: this.state.columns.filter((s, sidx) => idx 
!== sidx) });
}

render () {
 return (
  <div className='App'>
    <p className='App-intro'>
      <form onSubmit = {this.handleSubmit}>
      <h4>Columns</h4>

    {this.state.columns.map((column, id) => (
      <div className = "Columns">
        <input
          type = "text"
          name = "name"
          placeholder = {`ColumnName #${id + 1} name`}
          value = {column.name}
          onChange = {this.handleColumnChange(id)}
        />
        <input
          type = "text"
          name = "type"
          placeholder = {`ColumnType #${id + 1} name`}
          value = {column.type}
          onChange = {this.handleColumnChange(id)}
        />
        <button type = "button" onClick = {this.handleRemoveColumn(id)} className = "small">-</button>
      </div>
    ))}
        <button type = "button" onClick = {this.handleAddColumn} className = "small">Add Column</button>
        <button
          onClick = {() => {
            console.info("This is the state",this.state);
          }}
        >
          Submit
        </button>
      </form>
    </p>
  </div>
)
}
}
export default App