Using reactjs, on one state change complete object is re-renderring

Question

I'm using an input field on onchange i'm changing the value, the fields are in the table format, for table im using BootstrapTable, we are getting a data from the api, it is in array object.

we are fetching data in one component and sending the data and method as props to the other component. the issue here is while change the state to the one component during onchange complete object is refreshing, because of this use loosing the focus from the textbox and need to be click to change the value. Below is the code and data:

const [data,setData] =useState( [
        {
            "listId": 1,
            "name": null,
            "address": null
        },
        {
            "listId": 2,
            "name": null,
            "address": null
        },
        {
            "listId": 3,
            "name": null,
            "address": null
        },
        {
            "listId": 4,
            "name": null,
            "address": null
        },
        {
            "listId": 5,
            "name": null,
            "address": null
        },
        {
            "listId": 6,
            "name": null,
            "address": null
        },
        {
            "listId": 7,
            "name": null,
            "address": null
        }
    ])

we are sending data and setData as props to the other component:

    import BootstrapTable from "react-bootstrap-table-next";
    <BootstrapTable
            columns={dataSheet1}
            data={data}
            keyField="listId"
          />


    const dataSheet1 = [
    {
      dataField: "listId",
      text: "List ID"
    },
    {
      dataField: "name",
      text: "Name",         
      },
      formatter: (cell, row, rowIndex, colIndex) => {
        return (
          <div>
            <input
              type="text"
              name={name}
              defaultValue={data[rowIndex].name}
              onChange={(e) => onChangeMainMethod(e, rowIndex, "name")}
              placeholder="Enter Value"
            />
          </div>
        );
      },
    },
    {
      dataField: "address",
      text: "Address",
      headerStyle: {
        width: "50%",          
      },
      formatter: (cell, row, rowIndex,colIndex) => {
        return (
          <div>
            <input
              type="text"
              name={address}
              defaultValue={data[rowIndex].address}
              onChange={(e) => onChangeMainMethod(e, rowIndex, "address")}
              placeholder="Enter Value"
            />
          </div>
        );
      },
    },
  ];


    const onChangeMainMethod = (e, rowIndex, name) => {
    const value = e.target.value
    const old = setData[rowIndex];
    const updated = { ...old, [name]: value };
    const updateObj = [...data];
    updateObj[rowIndex] = updated;
    updateObj[rowIndex].address = value
    updateObj[rowIndex].name = value
    let updateObjData = updateObj;
    props.setData(updateObjData);
  }

we are fetching data in one component and sending the data and method as props to the other component. the issue here is while change the state to the one component during onchange complete object is refreshing, because of this use loosing the focus from the textbox and need to be click to change the value.