How to make lines in file tree

I have created a design in figma and now i am trying to render this in browser. But i can’t imagine, how to create lines before child tree nodes depending on structure?

TreeNode.jsx

import classes from "./TreeNode.module.css"
import opened_file from "../../images/opened_file.svg"
import closed_file from "../../images/closed_file.svg"
import file_image from "../../images/file_image.svg"
import three_points from "../../images/three_points.svg"
import { useEffect, useState } from "react"

function TreeNode ({item}) {
    const [element, setElement] = useState(item)

    return (
        <div className={classes.treeNode}>
            <div id={element.id} className={classes.treeNodeWrapper}>
                <div className={classes.treeNodeLeftSide}>
                    {element.type === "FOALDER" &&
                        <div className={element.opened ? classes.treeNodeOpened : classes.treeNodeClosed}>
                            <img src={element.opened ? opened_file : closed_file} alt={classes.opened ? "svg_opened_file" : "svg_closed_file"}/>
                        </div>
                    }
                    {element.type === "FILE"
                    &&
                    <div className={classes.treeNodeFIleImage}>
                        <img src={file_image} alt="svg_file_image"/>
                    </div>
                    }
                    <div className={classes.treeNodeName}>
                        {element.title}
                    </div>
                </div>
                <div className={classes.treeNodeCloseTextBlock}>
                    
                </div>
                <div className={classes.treeNodeEdit}>
                    <img src={three_points} alt="svg_edit_file"/>
                </div>
            </div>
            <div className={classes.nextTreeNode}>
                {element.children?.map((x) => (
                    <TreeNode key={x.id} item={x}/>
                ))}
            </div>
        </div>
    );
}

export default TreeNode;

TreeNode.module.css

.treeNodeWrapper{
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 18px;
    justify-content: space-between;
    padding-top: 7.25px;
    padding-bottom: 7.25px;
    position: relative;
}

.treeNodeLeftSide{
    display: flex;
    align-items: center;
}

.treeNodeOpened{
    margin-right: 10px;
}

.treeNodeClosed{
    margin-right: 7px;
}

.treeNodeFIleImage{
    margin-right: 6px;
}

.treeNodeName{
    font-family: "Inter", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #5E6D83;
    font-size: 12.88px;
    letter-spacing: -2%;
    line-height: 0px;
}

.nextTreeNode{
    padding-left: 25px;
}

.treeNodeWrapper::before{
    content: url('../../images/file_line_default.svg');
    position: absolute;
    left: -1.7px;
}

files.js

const files = [
    {
        id: 232141332,
        title: "Documents",
        type: "FOALDER",
        opened: false,
        level: 0,
        fatherId: null,
        children: [
            {
                id: 734573086,
                title: "MA5600",
                type: "FOALDER",
                opened: true,
                level: 1,
                fatherId: 232141332,
                children: [
                    {
                        id: 867407333,
                        title: "delete board",
                        type: "FILE",
                        opened: false,
                        level: 2,
                        fatherId: 734573086,
                        children: []
                    },
                    {
                        id: 110345245,
                        title: "add board",
                        type: "FILE",
                        opened: false,
                        level: 2,
                        fatherId: 734573086,
                        children: []
                    }
                ]
            },
            {
                id: 222225454,
                title: "C300M",
                type: "FOALDER",
                opened: false,
                level: 1,
                fatherId: 232141332,
                children: [
                    {
                        id: 333334256,
                        title: "no option TR-82",
                        type: "FILE",
                        opened: false,
                        level: 2,
                        fatherId: 222225454,
                        children: []
                    }
                ]
            }
        ]
    },
    {
        id: 23232,
        title: "Food",
        type: "FOALDER",
        opened: false,
        level: 0,
        fatherId: null,
        children: [
            {
                id: 2323242,
                title: "MA5600",
                type: "FOALDER",
                opened: false,
                level: 1,
                fatherId: 1224232,
                children: [
                    {
                        id: 45674734,
                        title: "delete board",
                        type: "FILE",
                        opened: false,
                        level: 2,
                        fatherId: 734573086,
                        children: []
                    },
                    {
                        id: 5368876,
                        title: "add board",
                        type: "FILE",
                        opened: false,
                        level: 2,
                        fatherId: 734573086,
                        children: []
                    }
                ]
            },
            {
                id: 258089,
                title: "C300M",
                type: "FOALDER",
                opened: false,
                level: 1,
                fatherId: 232141332,
                children: [
                    {
                        id: 1112312,
                        title: "no option TR-82",
                        type: "FILE",
                        opened: false,
                        level: 2,
                        fatherId: 222225454,
                        children: []
                    }
                ]
            }
        ]
    }
]

export default files;

How can i do it like at this image, what i have to use css or js?

How it looks like in browser now without lines: