React: How to Properly Render Table Rows as Components Within Table Body?

I’m encountering an issue in my React application where I’m rendering a table with dynamic rows using components. However, the rows are being treated as separate elements instead of components within the table body.

Despite generating the rows dynamically using components, they’re not aligning properly with the table headers. I’ve tried various approaches, including encapsulating each row within its own element, but the issue persists.

1. TableHead Component:

function TableHead({ rowCount }) {
  return (
    <div className='table-container'>
      <table>
        <thead>
          <tr>
            <th>S. No</th>
            <th>Subject</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr><InitialRender count={rowCount} /></tr>
        </tbody>
      </table>
    </div>
  );
}

2. InitialRender Component:

function InitialRender({ count }) {
  const initialRows = [];
  for (let i = 0; i < count; i++) {
    initialRows.push(
      <TableRow key={i + 1} count={i + 1} />
    );
  }

  return initialRows;
}

3. TableRow Component

function TableRow({ count }) {
  return (
    <tr>
      <td>{count}</td>
      <td><input type="text" placeholder='Enter subject' /></td>
      <td>
        <select name="" id="dropdown">
          <option value="">Grades</option>
          <option value="O">O</option>
          <option value="A+">A+</option>
          <option value="A">A</option>
          <option value="B+">B+</option>
          <option value="B">B</option>
          <option value="AB">AB</option>
        </select>
      </td>
    </tr>
  );
}

4. App Component:

function App() {
  const [rowCount, setRowCount] = useState(6);

  const handleAddRow = () => {
    setRowCount(prevCount => prevCount + 1);
  };

  return (
    <div className='form-container'>
      <form action=''>
        <TableHead rowCount={rowCount} />
        <InitialRender count={rowCount} />
        <div className='buttons'>
          <AddRow onAddRow={handleAddRow} />
          <Submit />
        </div>
      </form>
    </div>
  );
}