const FCComponent = () => {
const [data, setData] = useState([{id: '1', value: '1'},{id: 2, value: '2'}])
return (
<>
{
  data.rates_table.map((item, index) => {
    return ( 
    <Input 
      id={`data.${index}.value`}
      name={`data.${index}.value`}
      value={data[index].value}
      onChange={(e) => {
             setData((prev) => [
            ...prev,
            (data[index].value =
              e.target.value)
          ]);
        }
      }
      defaultValue={item.value}
      key={`data.${index}.value`}
    />
    );
  })
}
}
</>
)

//Updating the Input results in data[index].value being updated but for each time onChange is triggered data becomes [{id: '1', value: // 'updated value'},{id: '2', value: 'updated value'}, e.target.value * amount of times onChange is triggered]