The input elements for the item list for a larger form

There is this large form which needs list items in it and list items have its own input elements as well.... now how to have plug and play things

For Accounts

<InTableAccount
  //label = "xxx"
  //size = "col-sm-4"
  onChange={(data, selected) => {
    let acc = data.find((ii: any) => data.account_id === selected.value);
    console.log(acc);
  }}
/>

For Expense category

<SearchableExpenseCategory
  data_holder="expense" //could be a random string
  //label = "xxx"
  css="col-sm-4 mt-2"
  pickedData={({ data, selected }) => {
    createItem(
      "ec_id",
      data.find((tt: any) => tt.ec_id === selected.value)
    );
  }}
/>

For Product

<SearchableProductsAndServices
  data_holder="products" //could be a random string
  //label = "xxx"
  css="col-sm-4 mt-2"
  pickedData={({ data, selected }) => {
    createItem(
      "ps_id",
      data.find((tt: any) => tt.ps_id === selected.value)
    );
  }}
/>