Is it possible to dynamically generate linws checkbox tree?

I have been playing around with my react project and I am trying to replicate my checkbox tree design. (I have linked the image).

I have a nice jsfiddle of a working solution, however, I am really struggling to see how I can use this in my project. Because I will need to dynamically generate my tree.

Is it possible to use this code to dynamically generate a tree and replicate my design?

I feel like the Pseudo styling will be tough to deal with if I map my data.

My data will look like this:

[
  {
    value: 1,
    data: "data",
    children: [],
  },
  {
    value: 2,
    data: "data2",
    children: [],
  },
  {
    value: 3,
    data: "data3",
    children: [
      {
        value: 1,
        data: "data",
        children: [],
      },
    ],
  },
];

code:

.what {
  margin-right: 15px;
}
  
  ul.tree,
  ul.tree ul {
    padding-bottom: 5px;
    list-style: none;
    margin: 0;
    padding-left: 0;
  }

  ul.tree ul {
    margin-top: 5px;
    margin-left: 20px;
  }

  ul.tree li {
    padding-bottom: 5px;
    margin-left: 0.60em;
    border-left: thin solid #000;
  }

  ul.tree li:last-child {
    border-left: none;
  }

  ul.tree li:before {
    width: 0.9em;
    height: 0.6em;
    margin-right: 0.1em;
    vertical-align: top;
    border-bottom: thin solid #000;
    content: "";
    display: inline-block;
  }

  ul.tree li:last-child:before {
    border-left: thin solid #000;
  }

<ul class="tree"><input class="what" type="checkbox" />Root</ul>
<ul class="tree">
  <li><input class="what" type="checkbox" /> Animals </li>
  <li><input class="what" type="checkbox" /> Animals
    <ul class="tree">
      <li><input class="what" type="checkbox" /> Animals </li>
    </ul>
  </li>
</ul>
<ul class="tree"><input class="what" type="checkbox" /> Root</ul>
<ul class="tree"><input class="what" type="checkbox" /> Root</ul>