Resolved: Trying to map response in table but not getting expected output

function App() {
  let response = [
    {
      id: 134,
      user_name: 'abc',
      phone_number: 1234567890,
      children: [
        { id: 46, user_name: 'Sid', phone_number: 9834763467 },
        { id: 50, user_name: 'Tom', phone_number: 9834763467 },
      ],
    },
    {
      id: 948,
      user_name: 'def',
      phone_number: 9823437483,
      children: [
        { id: 20, user_name: 'Lina', phone_number: 9834763467 },
      ],
    },
    {
      id: 865,
      user_name: 'abc',
      phone_number: 1234567890,
      children: [
        { id: 60, user_name: 'Nikk', phone_number: 9834763467 },
        { id: 15, user_name: 'Mina', phone_number: 9834763467 },
      ],
    },
  ];

  return (
    <div className="App">
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>name</th>
            <th>child name</th>
            <th>child id</th>
          </tr>
        </thead>
        <tbody>
          {response.map((value, index) => {
            return (
              <>
                <tr key={value.id}>
                  <td rowSpan={value['children'].length}>{value["id"]} 
                 </td>
                  <td rowSpan={value['children'].length}> 
                 {value["user_name"]}</td>
                  <td>{value["children"].map((child) => {
                    return (
                      <td>{child.user_name}</td>
                    );
                  })}</td>
                  <td>{value["children"].map((child) => {
                    return (
                      <td>{child.id}</td>
                    );
                  })}</td>
                </tr>
              </>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default App;

<td>
   {value['children'].map((data, index) => {
     return <td key={index}>{data['user_name']}</td>;
   })}
</td>

 <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Phone number</th>
        <th>Child id</th>
        <th>Child name</th>
        <th>Child phone number</th>
      </tr>
    </thead>
    <tbody>
      {response.map((value, index) => {
        return (
          <React.Fragment key={value.id}>
            <tr>
              <td rowSpan={value['children'].length}>{value['id']}</td>
              <td rowSpan={value['children'].length}>
                {value['user_name']}
              </td>
              <td rowSpan={value['children'].length}>
                {value['phone_number']}
              </td>
              <td>{value['children'][0]['id']}</td>
              <td>{value['children'][0]['user_name']}</td>
              <td>{value['children'][0]['phone_number']}</td>
            </tr>
            <tr>
              {value['children'].slice(1).map((data, index) => {
                return <React.Fragment key={index}> 
                  <td>{data['id']}</td>
                  <td>{data['user_name']}</td>
                  <td>{data['phone_number']}</td>
                </React.Fragment>;
              })}
            </tr>
          </React.Fragment>
        );
      })}
    </tbody>
  </table>