I'm trying to resent a tree with proper indentation using index and adding it as a style.

It partially does its job as it shows indentation of parent and its sub children yet doesn't represent the indentation between a child and a grandchild.

the data :

items: [
    {
      label: 'A',
      checked: true,
      items: [
        {
          label: 'sub A-1',
          checked: true,
          items: [
            {
              label: 'sub A-1-2',
              checked: true,
              items: [
                {
                  label: 'sub A-1-2-1',
                  checked: true,
                },
              ],
            },
          ],
        },
        {
          label: 'Sub A-2',
          checked: true,
        },
      ],
    },
    {
      label: 'B',
      checked: false,
      items: [
        {label: 'B-1', checked: false},
        {label: 'B-2', checked: false},
      ],
    },
  ],

the code:

export const ReportTree = (data: ReportTreeProps) => {
  return (
    <div>
      <ul>
        {data.items.map(node => (
          <TreeNode node={node} key={node.value} />
        ))}
      </ul>
    </div>
  )
}

function TreeNode({node, index}) {
  return (
    <li>
      <div className=" flex flex-row items-center gap-2  p-2">
        <div className={`pl-${5 + index}`}>{node.label}</div>
        <input type="checkbox" name={node.label} />
      </div>
      {node.items && (
        <div>
          <ul>
            {node.items.map((child, index) => (
              <TreeNode key={child.value} node={child} index={index} />
            ))}
          </ul>
        </div>
      )}
    </li>
  )
}

How it looks :