Find path of object property, recursively

I want to print path of object key, dynamically. Here is my code:

   const Tree = ({ data }) => {
     let path = "onboarding";
  
      return Object.keys(data).map((key) => {
        if (Array.isArray(data[key])) {
          path = path + "." + key;
          return (
              <Tree data={data[key]}></Tree> 
          );
        }

        if (typeof data[key] === "object") {
          path = path + "." + key;
          return (
              <Tree data={data[key]}></Tree>
          );
        } else {
          path = path + "." + key;    
          return (
            <input defaultValue={data[key]}
              style={{ fontWeight: "bold" }}
              disabled={!this.props.isEditable}/>

          );
        }
      });
    };

and its my data

  onboarding: {
    enumType: 1,
    key: "key1",
    steps: [
      {
        title: "STEP ONE",
        description: "des1",
        instructions: [
          {
            icon: "step_power",
            label: {
              text: "text1",
              color: "A11111",
              location: "top",
            },
          },
        ],
      },
      {
        title: "STEP TWO",
        description: "des2",
        instructions: [
          {
            icon: "step_power",
            label: {
              text: "text2",
              color: "A11111",
              location: "top",
            },
          },
       ],
    }

And i want to print path of key for each iteration, expected output :

• “onboarding.enumType”
• “onboarding.key”
• “onbording.steps”
• “onboarding.steps[0]”
• “onboarding.steps[0].title”
• . . .
• “onboarding.steps[1].instructions[0].label.location”