Organize JSON data in HTML table with unique header rows for each data group

I have a JSON object that includes a key:value pair called callRoot. Example values for this key:value pair include @S, @C, and @W. There are multiple objects that have the same value and I hoping to set a HTML table head row at the start of each grouping and repeat it for each group of data.

Sample JSON data:

const commodities = [
  {
    actualSymbol: "@SF22",
    callRoot: "@S",
    open: 1.00,
    close: 2.00,
    userDescription: "SOYBEANS",
    // Other data
  },
  {
    actualSymbol: "@SH22",
    callRoot: "@S",
    open: 4.00,
    close: 6.00,
    userDescription: "SOYBEANS",
    // Other data
  },
  {
    actualSymbol: "@SK22",
    callRoot: "@S",
    open: 0.50,
    close: 2.30,
    userDescription: "SOYBEANS",
    // Other data
  },
  {
    actualSymbol: "@CH22",
    callRoot: "@C",
    open: 0.25,
    close: 0.75,
    userDescription: "CORN",
    // Other data
  },
  {
    actualSymbol: "@CK22",
    callRoot: "@C",
    open: 5.00,
    close: 6.75,
    userDescription: "CORN",
    // Other data
  },
  {
    actualSymbol: "@CN22",
    callRoot: "@C",
    open: 1.00,
    close: 2.00,
    userDescription: "CORN",
    // Other data
  },
  {
    actualSymbol: "@WH22",
    callRoot: "@W",
    open: 3.25,
    close: 2.00,
    userDescription: "WHEAT",
    // Other data
  },
  {
    actualSymbol: "@WK22",
    callRoot: "@W",
    open: 1.00,
    close: 2.00,
    userDescription: "WHEAT",
    // Other data
  },
  {
    actualSymbol: "@WN22",
    callRoot: "@W",
    open: 0.10,
    close: 0.20,
    userDescription: "WHEAT",
    // Other data
  }
];

Here is some of the code I have been playing with, though I could be way off on achieving my set requirements. A switch statement may be better suited than the if/else if statement

// Create empty arrays for each callRoot grouping
const soybeans = [];
const corn = [];
const wheat = [];

for(let commodity of commodities) {
  let callRoot = commodity.callRoot;
  if(callRoot.includes("@S")) {

  } else if(callRoot.includes("@C")) {

  } else if(callRoot.includes("@W")) {
  
  }
}

const soyHeader = soybean[0];
if(soyHeader) {
  // Render table header row HTML
}
// Render table row HTML

const cornHeader = corn[0];
if(cornHeader) {
  // Render table header row HTML
}
// Render table row HTML

const wheatHeader = wheat[0];
if(wheatHeader) {
  // Render table header row HTML
}
// Render table row HTML

Example HTML table structure:

<table>
  <tbody>
    <tr>
      <th colspan="9">SOYBEANS</th>
    </tr>
    <tr>
      <td>Month</td>
      <td>Last</td>
      <td>Change</td>
      <td>High</td>
      <td>Low</td>
    </tr>
    <tr>
      <td>August 2022</td>
      <td>1265'2</td>
      <td>-2'4</td>
      <td>1275'2</td>
      <td>1261'4</td>
    </tr>
    <tr>
      <td>August 2022</td>
      <td>1265'2</td>
      <td>-2'4</td>
      <td>1275'2</td>
      <td>1261'4</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="9">CORN</th>
    </tr>
    <tr>
      <td>Month</td>
      <td>Last</td>
      <td>Change</td>
      <td>High</td>
      <td>Low</td>
    </tr>
    <tr>
      <td>August 2022</td>
      <td>1265'2</td>
      <td>-2'4</td>
      <td>1275'2</td>
      <td>1261'4</td>
    </tr>
    <tr>
      <td>August 2022</td>
      <td>1265'2</td>
      <td>-2'4</td>
      <td>1275'2</td>
      <td>1261'4</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="9">WHEAT</th>
    </tr>
    <tr>
      <td>Month</td>
      <td>Last</td>
      <td>Change</td>
      <td>High</td>
      <td>Low</td>
    </tr>
    <tr>
      <td>August 2022</td>
      <td>1265'2</td>
      <td>-2'4</td>
      <td>1275'2</td>
      <td>1261'4</td>
    </tr>
    <tr>
      <td>August 2022</td>
      <td>1265'2</td>
      <td>-2'4</td>
      <td>1275'2</td>
      <td>1261'4</td>
    </tr>
  </tbody>
</table>