defaultOpenNodes does not work when bind to react state

[xmhealth]

import "./styles.css";
import React, { useEffect, useState } from "react";
import { ReactTree } from "@naisutech/react-tree";

export default function App() {
  const [openNodes, setOpenNodes] = useState([]);
  const [nodeList, setNodesList] = useState([]);

  const nodes2 = [
    {
      id: "*",
      parentId: null,
      label: "Root 1"
    },
    {
      id: "223d7ae2-ddee-4136-a922-b6b26da4b992",
      parentId: "*",
      label: "Child 1",
      items: [
        {
          id: "465",
          parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
          label: "File 1"
        },
        {
          id: "435",
          parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
          label: "File 2"
        },
        {
          id: "778",
          parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
          label: "File 3"
        }
      ]
    },
    {
      id: "228",
      parentId: "325",
      label: "Child 2"
    },
    {
      id: "430",
      parentId: "325",
      label: "Child 3"
    },
    {
      id: "920",
      parentId: "438",
      label: "Child 4"
    },
    {
      id: "337",
      parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
      label: "Child 1 Child 1"
    },
    {
      id: "360",
      parentId: "228",
      label: "Child 2 Child 1",
      items: [
        {
          id: "776",
          parentId: "360",
          label: "File 3"
        },
        {
          id: "686",
          parentId: "360",
          label: "File 4"
        },
        {
          id: "579",
          parentId: "360",
          label: "File 5"
        }
      ]
    },
    {
      id: "353",
      parentId: "430",
      label: "Child 3 Child 1"
    },
    {
      id: "554",
      parentId: "430",
      label: "Child 3 Child 2"
    }
  ];

  useEffect(() => {
    const nodes = [
      {
        id: "*",
        parentId: null,
        label: "Root 1"
      },
      {
        id: "223d7ae2-ddee-4136-a922-b6b26da4b992",
        parentId: "*",
        label: "Child 1",
        items: [
          {
            id: "465",
            parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
            label: "File 1"
          },
          {
            id: "435",
            parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
            label: "File 2"
          },
          {
            id: "778",
            parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
            label: "File 3"
          }
        ]
      },
      {
        id: "228",
        parentId: "325",
        label: "Child 2"
      },
      {
        id: "430",
        parentId: "325",
        label: "Child 3"
      },
      {
        id: "920",
        parentId: "438",
        label: "Child 4"
      },
      {
        id: "337",
        parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
        label: "Child 1 Child 1"
      },
      {
        id: "360",
        parentId: "228",
        label: "Child 2 Child 1",
        items: [
          {
            id: "776",
            parentId: "360",
            label: "File 3"
          },
          {
            id: "686",
            parentId: "360",
            label: "File 4"
          },
          {
            id: "579",
            parentId: "360",
            label: "File 5"
          }
        ]
      },
      {
        id: "353",
        parentId: "430",
        label: "Child 3 Child 1"
      },
      {
        id: "554",
        parentId: "430",
        label: "Child 3 Child 2"
      }
    ];

    setNodesList(nodes);
    setOpenNodes(["*"]);
  }, []);

  return (
    <div>
      <ReactTree defaultOpenNodes={openNodes} nodes={nodeList} />
      <ReactTree defaultOpenNodes={["*"]} nodes={nodes2} />
    </div>
  );
}

"Root 1" node of the first ReactTree is not default opened.
"Root 1" node of the second ReactTree is default opened.

[xmhealth]

I called toggleOpenNodes in useEffect.