Javascript – Comparing arrays to create table in react

I wanted to create a table with the data taken an API, where only some of the columns must be displayed as default. The following are the two arrays, one containing the default column headers for the table and the other containing the id and title of the data :

const defaultColumns = ["email", "rolename", "isActive"];

const headers = [
    {
      id: "username",
      title: "User Name",
    },
    {
      id: "name",
      title: "Name",
    },
    {
      id: "email",
      title: "Email",
      applySort: true,
    },
    {
      id: "siteName",
      title: "Site Name(s)",
    },
    {
      id: "roleName",
      title: "Role(s)",
    },
  ];

So I know how I can create the table with just headers array, I would like some guidance on what I will have to do.

This is what I’ve done so far:

            <table className="table table-md table-striped table-bordered table-hover">
              <thead>
                <tr>
                  {headers.map((header, i) => {
                    if (/* Condition to check if header.id is in defaultColumns */) {
                        return <th key={header.id}>{header.title}</th>;
                      }
                  })}
                </tr>
              </thead>
              <tbody>
                {props.data.map((row, index) => (
                  <tr key={index}>
                    {headers.map((header, i) => {
                      if (/* Condition to check if header.id is in defaultColumns */) {
                        return <td key={i}>{row[header.id]}</td>;
                      }
                    })}
                  </tr>
                ))}
              </tbody>
            </table>