Why does performing DFS with this code result in duplicate leaves?

I am writing an algorithm that discerns whether two trees have the same leaves.

These have the same leaf numbers in the same order so this returns true.

This is the code I wrote:

function leafSimilar(root1: TreeNode | null, root2: TreeNode | null): boolean {

    console.log(DFS(root1))

    const leavesRoot1 = DFS(root1);
    const leavesRoot2 = DFS(root2);

    for (let i = 0; i < Math.max(leavesRoot1.length, leavesRoot2.length); i += 1) {
        if (leavesRoot1[i] !== leavesRoot2[i]) {
            return false;
        }
    }

    return true;
};

function DFS(root, leaves = [] ) {

    if(!root) return leaves; 

    if (!root.left && !root.right) {
        leaves.push(root.val);
        return leaves;
    }

    // return DFS(root.left).concat(DFS(root.right)); // this is the correct answer

    return DFS(root.left, leaves).concat(DFS(root.right, leaves)); // why doesn't this work?
}

The last line in the code is what i initially thought, but it is wrong.

I couldn’t draw it in my mind so I logged them as seen in the second line.

It logs:

[
  6, 7, 4, 
  6, 7, 4, 
  6, 7, 4, 
  6, 7, 4, 9, 8,
  6, 7, 4, 9, 8
] 

After 2 hours, I cannot figure out why this is.

I would think it should be at least something similar to this:

[6, 
 6, 7, 
 6, 7, 4, 
 6, 7, 4, 9,
 6, 7, 4, 9, 8,
]

or just

[6,7,4,9,8]

which is the correct one.

Would someone be able to explain to me why?

The DFS function takes leaves array argument from the previous call.

This means that it should receive leaves from the node above, not below, so there shouldn’t be a repeat pattern in the leaves array because it is empty.

The DFS is in preorder according to the code I wrote, so the left-most nodes are evaluated first.

Please help me understand.