如何设置图表以使用JavaScript解构正确显示信息？

let userList = {
  "people": [

    {    firstName: "Fred",
     lastName: "Smith",
     dateOfBirth: 1980,
     spokenLanguages: {
       native: "English",
       fluent: "Spanish",
       intermediate: "Chinese" }
    },

    {    firstName: "Monica",
     lastName: "Taylor",
     dateOfBirth: 1975,
     spokenLanguages: {
       native: "Spanish",
       fluent: "English",
       intermediate: "French" }
    },

    {    firstName: "Maurice",
     lastName: "Edelson",
     dateOfBirth: 1992,
     spokenLanguages: {
       native: "English",
       fluent: "Spanish",
     }
    },

    {    firstName: "Kelly",
     lastName: "Lang",
     dateOfBirth: 1982,
     spokenLanguages: {
       native: "English",
       fluent: "German",
       intermediate: "Dutch" }
    }
  ]
};
userList.people.map((p)=>{
  let { firstName } = p;
  let { lastName } = p;
  let { dateOfBirth } = p;
  let { spokenLanguages: { native , fluent, intermediate } } = p;
  document.querySelector('tbody').innerHTML += `
    <tr>
      <td>${firstName}</td>
      <td>${lastName}</td>
      <td>${dateOfBirth}</td>
      <td>Native: ${native}<br>Fluent: ${fluent}<br>Intermediate: ${intermediate}</td>
    </tr>
    `
});
table, th, td {
  border: 2px solid black;
}

th {
  padding: 10px;
}
  <table>
    <thead>
      <tr>
        <th><strong>First Name</strong></th>
        <th><strong>Last Name</strong></th>
        <th><strong>Date of Birth</strong></th>
        <th><strong>Spoken Languages</strong></th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
    </table>