Как разделить интерфейсный компонент и компонент с бизнес-логикой при работе с таблицами?

// Table.jsx
function Table({ data, columns, onSort, onRowClick }) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map(col => (
            <th key={col.key} onClick={() => onSort(col.key)}>
              {col.label}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map(row => (
          <tr key={row.id} onClick={() => onRowClick(row)}>
            {columns.map(col => (
              <td key={col.key}>{row[col.key]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// TableContainer.jsx
function TableContainer() {
  const [data, setData] = useState([]);
  const [sortKey, setSortKey] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);

  const handleSort = (key) => {
    const sorted = [...data].sort((a, b) => a[key] > b[key] ? 1 : -1);
    setData(sorted);
    setSortKey(key);
  };

  return (
    <Table
      data={data}
      columns={[
        { key: 'name', label: 'Name' },
        { key: 'age', label: 'Age' }
      ]}
      onSort={handleSort}
      onRowClick={(row) => console.log(row)}
    />
  );
}