Multiple map inside map javascript/react

I have an array of objects that has children. Those children also has children. I want to print those out in order in React. So what I am trying to do is multiple maps inside eachother.

I can manage to do one map inside another like this:

 org = workplaces.map((item) =>
    <ul className="" style={{ background: "grey" }}>
    <li>{item.workplace}</li>
    {item.children.map((item2) => {
     return <li>{item2.workplace}</li>
    })}
  </ul>
)

but when I try to do another map inside item2, I get “Cannot read properties of undefined (reading ‘map’)” for item2 (it does have children):

org = workplaces.map((item) =>
    <ul className="" style={{ background: "grey" }}>
    <li>{item.workplace}</li>
    {item.children.map((item2) => {
      item2.children.map((item3) => {
        return <li>{item3.workplace}</li>
      })
      return <li>{item2.workplace}</li>
    })}
  </ul>
)

Is it possible to make 3 maps inside eachother?