Traverse an object of arrays, for a nested form

Question

I have a dynamic form, that is nested, the form is to describe an overhead gantry crane.

so the structure looks like this:

let equipmentInfo = {   
  bridges:[{
    trolleys:[{
      hoists:[{
      
      }]
    }]
  }] 
}

I have a function component for each bridge, trolley, and hoist set of fields. I pass down an array that describes its location in the tree like:

let keyPath = [['arrayLocation', indexOfEntry]] // [['bridge', 1], ['trolley',3], ['hoist', 0]]

My question surrounds the use of this getObject function

const getObject = (object, location) => {
    if(object == undefined) return {}
    if(location.length == 0) return object
    if(location.length == 1) return object[location[0][0]][location[0][1]]
    if(location.length == 2) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]]
    if(location.length == 3) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]][location[2][0]][location[2][1]] 
    if(location.length == 4) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]][location[2][0]][location[2][1]][location[3][0]][location[3][1]] 
    if(location.length == 5) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]][location[2][0]][location[2][1]][location[3][0]][location[3][1]][location[4][0]][location[4][1]] 
    if(location.length == 6) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]][location[2][0]][location[2][1]][location[3][0]][location[3][1]][location[4][0]][location[4][1]][location[5][0]][location[5][1]]
    if(location.length == 7) return object[location[0][0]][location[0][1]][location[1][0]][location[1][1]][location[2][0]][location[2][1]][location[3][0]][location[3][1]][location[4][0]][location[4][1]][location[5][0]][location[5][1]][location[6][0]][location[6][1]]
}

its used in the handleOnChange like this:

const handleInputChange = (e, keyPath) => {
    
  const { name, value } = e.target;
  const object = {...equipmentInfo}

  const targetObject = getObject(object, keyPath)
  targetObject[name] = value

  setObject(targetObject, object, keyPath)
    
  setEquipmentInfo(object);
};

Is there a better way to do this? not only for better readability, but to support n amount of branches.

  <BridgeFields 
    keyPath={newKeypath} 
    handleOnChange={handleOnChange}
    equipmentInfo={EquipmentInfo}
    setEquipmentInfo={setEquipentInfo}
    
  />

Here is the implementation example:

// inside <BridgeFields/>
getObject(equipmentInfo, keyPath).trolleys.map((trolly, index)) => {

  // add to the keyPath the compenent and its index
  let newKeyPath = [...keyPath, ["trolleys", index]]
  
  // Form fields describing a bridge 
  <Form.Component 
    type='text' 
    name='serialNumber'
    onChange={(e)=>{handleOnChange(e, newKeyPath)}
  />

  // also include its child component fields (hoists, etc) .. like:
  <HoistFields 
    keyPath={newKeypath} 
    handleOnChange={handleOnChange}
    equipmentInfo={EquipmentInfo}
    setEquipmentInfo={setEquipentInfo}
}

This works and its actually quite fast, but im looking to improve what I've done here. there is more to this equipmentInfo object and i would like to make it better.

I appreciate any advice thanks!