How to have editable text box with dynamic value component

I am new to react and was in a problem. I am trying to have an editable textbox whose value gets rendered on click of a button in react. As value is non changable without adding an on change function I added an onchange function however it has a problem when dealing with an array?

I am getting HR details from a table and setting them in a variable array like so:

const getHRDtls = async (newToken = true) => {
    if (newToken) {
      const rsp = await getAuthorization();
    }

    setLoading(true);

    var coil = document.getElementById("hrcoilid").value;
    var url = "api/purchase-coil-handling/getHRDtls?" + "&coil=" + coil;
    axiosAPI
      .get(url, defaultOptions)
      .then((response) => {
        if (response.statusText != "" && response.statusText != "OK") {
          //reject(response.statusText);
        } else {
          var rows = [];
          console.log(response.data);
          //console.log(response.data[0].CD_DESC);

          rows[0] = response.data[0].CD_DESC;
          rows[1] = response.data[0].HRC_CAST_NO;
          rows[2] = response.data[0].HRC_CD_FPC_YARD;
          rows[3] = response.data[0].HRC_CD_PRODUCT;
          rows[4] = response.data[0].HRC_CD_PROD_GRP;
          rows[5] = response.data[0].HRC_CD_PS_IN_STCK;
          

          setHRDtlsData(rows);
        }
      })
      .finally((f) => {
        setLoading(false);
      });
  };

I have initialised the set function like so:

const [hrDtlsData, setHRDtlsData] = React.useState([]);

I am trying to set the values in my textbox like this:

<CustomOutlineInput
                              id="status"
                              label="Status"
                              variant="outlined"
                              size="small"
                              value={hrDtlsData[0]}
                              onChange={(e) => setHRDtlsData(e.target.value)}
                              InputLabelProps={{
                                shrink: shrink ? true : false,
                              }}
                              style={{
                                marginTop: "6px",
                                marginLeft: "0px",
                                marginRight: "0px",
                                padding: "0px",
                              }}
                              fullWidth
                            />

where I am doing this:

                               value={hrDtlsData[0]}
                              onChange={(e) => setHRDtlsData(e.target.value)}

However on trying to change the value in the textbox all values in other textboxes with similar code gets affected as on onChange I am setting the entire setHRDtlsData(e.target.value)} to target value . Is there a way to just set HR details for one element of the array without affecting the others without me needing to set individual elements of the row above into a seperate set variable. Please help