我正在尝试动态创建输入字段。
输入场可以被认为是三维矩阵mat[m][n][2]。
为了再添加一个2D矩阵，在底部有一个按钮，并且为了在每个矩阵中创建更多行，在每个矩阵的末端有一个按钮。

这是我试过的。（忽略css）

const Counter = () => {
  const [info,setInfo] = useState([]);
  const addNewCond = (e) => {
    let matrix = [["",""]];
    setInfo([...info,matrix]);
  }
  const addNewDetailedCond = (index) => (e) => {
    let matrix=info[index];
    matrix.push(["",""]);
    setInfo(matrix);
  }
  
  const deleteCond = (e) => {
    
  }
  
  const deleteDetailedCond = (index) => e => {}
  const handleDetailedCond = (i,j,k) => (e) => {}
  
  
  return (
    <div>
      <form className="form-horizontal form-label-left">
        {
          info.map((mat,i) => (
            <>
              {
                mat.map((rows,j) => (
                  <div className="form-group">
                    <div className="col-md-6 col-sm-6">
                      <select className="form-control" value={info[i][j][0]} onChange={handleDetailedCond(i,j,0)}>
                        <option value="test">Test</option>
                      </select>
                    </div>
                    <div className="col-md-6 col-sm-6">
                      <input className="form-control" value={info[i][j][1]} onChange={handleDetailedCond(i,j,1)}/>
                    </div>
                  </div>
                ))
              }
              {
                mat.length !== 0 ? <button className="btn btn-primary" type="button" onClick={addNewDetailedCond(i)}>Add New Detailed Info</button> : null
              }
            </>
          ))
        }
        <div className="form-group">
          <div className="col-md-6 col-sm-6">
            <button type="button" className="btn btn-primary" onClick={addNewCond}>Add New Condition</button>
          </div>
        </div>
      </form>
    </div>
  )
}

代码笔链接-〉https://codepen.io/anonymous0045/pen/ZEMGLrN
每当我尝试在每个矩阵中添加更多的列表失败，我在特定矩阵中添加更多行时犯了什么错误？请帮助。