I'm iterating into a JSON file using map twice, but when I try to render the returned value of the second one, I got nothing. By console, the value is shown properly.

const Container2 = (props) => {

  const data = Array.from(props.data);

  return(
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {data.map(item => {
            item.metadata.map(item2 => {
              return(
                <tr key={data.id}>
                  <td>{item2.metadata.name}</td> //here I got nothing
                </tr>
              )
            })
          })}
        </tbody>
      </table>
    </div>
  )
}

Why am I getting nothing when rendering the returned value of the second map?