我使用DataGridMUI库创建了一个表，并希望向特定列的所有单元格添加一个选择组件
"我所做的一切"
我创建了一个Select组件并将其传递给colDef中的renderCell
我的组件使用useState，因为我希望它是可编辑的
随后，对于每个单元格，都有一个useState，这使得表格很重，有什么改进的想法吗？

我的代码

const Payment = (params) => {
    const [paymentStatus, setPaymentStatus] = useState(params.value);
    const id = params.id;

    return (
      <Select
        value={paymentStatus}
        onChange={(e) => {
          setPaymentStatus(e.target.value);
          return updateSubscription(id, e.target.value); // function to update the payment
        }}
      >
        <MenuItem value={"paid"}>Paid</MenuItem>
        <MenuItem value={"unpaid"}>Un Paid</MenuItem>
      </Select>
    );
  };

const columns = [
...
    {
      field: "payment_status",
      headerName: "Payment Status",
      renderCell: (params) => <Payment params={params} />,
    }
  ];