Styling bug with bordered HTMLTable with cells that span multiple rows

Environment

• Package version(s): 5.2.0
• Browser name and version: Chrome 116.0.5845.96

Code Sandbox

Link to a minimal repro (fork this code sandbox):

<HTMLTable bordere>
          <thead>
            <tr>
              <th></th>
              <th>Team Performance Metric</th>
              <th>{homeTeam}</th>
              <th>{awayTeam}</th>
            </tr>
          </thead>
          <tbody>
            {data.map((d) =>
              d.stats.map((stat, j) => (
                <tr key={stat.statName}>
                  {j === 0 ? (
                    <td rowSpan={d.stats.length}>
                      <span>{d.text}</span>
                    </td>
                  ) : null}
                  <td>
                    <span>{stat.statName}</span>
                  </td>
                  <td>
                    <div>
                      {stat.homeStat || '-'}
                    </div>
                  </td>
                  <td>
                    <div>
                      {stat.awayStat || '-'}
                    </div>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </HTMLTable>

Steps to reproduce

1. try out code that I post above. data inside of it doesn't matter

Actual behavior

Table looks like this, seems like the bordered prop is broken

Expected behavior

Expect to see smth like this