How to save dynamic content of a table?

Question

I am trying to save dynamically displayed data in a table after a filter and I am not able to save it in some array and keep it there for use in the next step.

In the beginning, the user is able to upload an excel file in the agreed format, I take the data from it and prepare an array with all the detail as you can see here:

 const readUploadFile = (e) => {
    e.preventDefault();
    if (e.target.files) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = e.target.result;
        const workbook = xlsx.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = xlsx.utils.sheet_to_json(worksheet);
        setCsvArray(json);
      };
      reader.readAsArrayBuffer(e.target.files[0]);
    }
  };

With this array prepare a table to view the content of the file in the frontend and for fill, the rest of the table consult the database to filter the information (in the database we handle the scale of numbers for suppliers) depending on the country and the product.

This is the piece of code that I'm using to render two different components depending on the editNumberRow to be able to modify the content of the lists

<Fragment>
  {editNumberRow === item.number ? (
    <EditableUploaderRow
    item={item}
    countryWise={countryWise}
    handleCancelClick={handleCancelClick}
    gvnotype={gvnotype}
    />
    ) : (
      <ReadOnlyUploaderRow
      item={item}
      handleDropdownDisable={handleDropdownDisable}
      countryWise={countryWise}
      gvnotype={gvnotype}
    />
  )}
</Fragment>

In the ReadOnlyUploaderRow, I am using a function(position, country) that filters the database of suppliers and returns a name depending on those values.

ex: function elements(0, Italy) ---> Pizza

In the function, I make a filter with the database and I give the suppliers that are better positioned in our scale, obtaining in each of the rendered columns different suppliers.

Then to render the different suppliers in the table I do the following:

<td>elements(0, ${country})</td>
<td>elements(1, ${country})</td>
<td>elements(2, ${country})</td>
<td>elements(3, ${country})</td>
<td>elements(4, ${country})</td>
<td>
  <button
    className="btn btn-sm btn-primary"
      onClick={(event) => handleDropdownDisable(event, item)}
  >
    Choose Manually
  </button>
</td>

If you press "Choose Manually" the state changes and the component that renders the row will now be EditableUploaderRow:

<td>
        <select
          className="form-select fileUploader__dropdownWidth"
          defaultValue={list[0] ? list[0].name_abbr : null}
        >
          {list.map((item3, key) => (
            <option value={item3.name_abbr} key={key}>
              {item3.name_abbr}
            </option>
          ))}
        </select>
      </td>
      <td>
        <select
          className="form-select fileUploader__dropdownWidth"
          defaultValue={list[1] ? list[1].name_abbr : null}
        >
          {list.map((item3, key) => (
            <option value={item3.name_abbr} key={key}>
              {item3.name_abbr}
            </option>
          ))}
        </select>
      </td>
      <td>
        <select
          className="form-select fileUploader__dropdownWidth"
          defaultValue={list[2] ? list[2].name_abbr : null}
        >
          {list.map((item3, key) => (
            <option value={item3.name_abbr} key={key}>
              {item3.name_abbr}
            </option>
          ))}
        </select>
      </td>
      <td>
        <select
          className="form-select fileUploader__dropdownWidth"
          defaultValue={list[3] ? list[3].name_abbr : null}
        >
          {list.map((item3, key) => (
            <option value={item3.name_abbr} key={key}>
              {item3.name_abbr}
            </option>
          ))}
        </select>
      </td>
      <td>
        <select
          className="form-select fileUploader__dropdownWidth"
          defaultValue={list[4] ? list[4].name_abbr : null}
        >
          {list.map((item3, key) => (
            <option value={item3.name_abbr} key={key}>
              {item3.name_abbr}
            </option>
          ))}
        </select>
      </td>
      <td>
        <button type="submit" className="btn btn-primary btn-sm">
          Save
        </button>
        <button
          onClick={handleCancelClick}
          className="btn btn-secondary btn-sm"
        >
          Cancel
        </button>
      </td>

This renders the list of the row depending on the country in that row with this:

let list = countryWise
    .filter((item2) => item2.country === item.country)
    .sort(compare);

Now you can see the compare function for better understanding:

const compare = (a, b) => {
    if (gvnotype === 'BB') {
      if (a.BB < b.BB) {
        return 1;
      }
      if (a.BB > b.BB) {
        return -1;
      }
      return 0;
    }

    if (gvnotype === 'XC') {
      if (a.XC < b.XC) {
        return 1;
      }
      if (a.XC > b.XC) {
        return -1;
      }
      return 0;
    }

    if (gvnotype === 'MS') {
      if (item.product === 'XC') {
        if (a.XC < b.XC) {
          return 1;
        }
        if (a.XC > b.XC) {
          return -1;
        }
        return 0;
      }

      if (item.product === 'BB') {
        if (a.BB < b.BB) {
          return 1;
        }
        if (a.BB > b.BB) {
          return -1;
        }
        return 0;
      }
    }
    if (a.DL < b.DL) {
      return 1;
    }
    if (a.DL > b.DL) {
      return -1;
    }
    return 0;
  };

I want to be able to persist the data in one place and be able to edit it with my editable component and with the save button change the last version and send it to the read component.