Modify state with multiple nested children in React

Question

I'm trying to build a component which works like a selection tree, but with the possibility for users to edit each row in the selection tree.

Basically, a component where you can keep drilling down to get more details.

The data is structured like a nested object, where an item with drilldown possibilities has a children as per below.

  const [categories, setCategories] = useState([
    {
      name: "First Tier",
      identifier: "1",
      children: [
        {
          name: "Second Tier",
          identifier: "2",
          children: [
            {
              name: "Third Tier",
              identifier: "3",
              children: [
                {
                  name: "Fourth Tier",
                  identifier: "4",
                  children: [{ name: "Fifth Tier", identifier: "5" }],
                },
              ],
            },
          ],
        },
      ],
    },
    { name: "Another top tier", identifier: "6" },
    { name: "a Third top tier", identifier: "7" },
  ]);

My challenge is that I can't seem to find a way to modify the child and the props as I wish. As an example, I would like to be able to modify the name of the fifth child to some random name. Note - I wish to be able to modify whatever child, and I will have the identifier available.

As I'm using react, it needs to be done using "useState", which makes it a little bit more tricky according to my understanding.

Any ideas or anyone been through this challenge?