有没有一种方法可以切换react bootstrap表中任何列的属性？

import { Table } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const tableData = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 35 },
];

function MyTable() {
  return (
    <Table striped bordered>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map((item) => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.age}</td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

function MyTable() {
  const [isBold, setIsBold] = useState(false);

  const toggleBold = () => {
    setIsBold(!isBold);
  };

  return (
    <Table striped bordered>
      <thead>
        <tr>
          <th>ID</th>
          <th onClick={toggleBold} style={{ fontWeight: isBold ? 'bold' : 'normal' }}>
            Name
          </th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {tableData.map((item) => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.age}</td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}