获取递归函数 React.jsJavaScript 的深度

我正在try 解决一个JavaScript/React.js练习来练习递归函数，在该练习中，您有一个输入对象(可以有多个深度级别)，并且您希望输出一个包含如下对象内容的"树":

//Input object
const input = {
  key1: {
    key11: 'v11',
  },    
  key2: {
    key21: {
      key211: 'v211',
    },
  },
  key3: 'v3',
}

/* Desired output:
key1:
--key11: v11
key2:
--key21:
----key211: v211
key3: v3
*/

我已经成功地开发了进行递归调用的App.jsx组件:

class App extends React.Component {  
    renderObject(input, level=0){
    return (Object.entries(input).map((item, index) => {
      if(typeof item[1] === "string"){
        let object = <div key={`${item[0]}-level-${level}`}><span>{"--".repeat(level)}</span>{item[0]}: {item[1]}</div>;
        level = 0;
        return object;
      } else {
        let object = <div key={`${item[0]}-level-${level}`}><span>{"--".repeat(level)}</span>{item[0]}: { this.renderObject(item[1], ++level)}</div>
        return (object)
      }
    }))
  }
  
  render() {
    return (
      <div>
            {this.renderObject(input)}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

我面临的问题是，我实现的level没有显示出真正的深度，因为它也在第一个级别的每次迭代中递增(当它应该保持为0的时候).

/* Obtained output: 
key1:
--key11: v11
--key2:
----key21:
------key211: v211
----key3: v3
*/

我怎么能解决这个问题呢？