State React JS Array Issue - reactjs

Question

I am trying to edit user input but the click event point to the input at array 0. i wanted to be able to render only the input to be edited.
The full project is available on sandbox via the link below. I am new to react developing and struggling with state. Can someone help, please?
To see what i mean by the above, please enter some input and click add 2 different input then edit the car. Only the inputs 0 is rendered.
https://codesandbox.io/s/eloquent-feather-gc88n?file=/src/header/header.js
Thank Leo
import React, { useState } from "react";
const EditSkillsForm = ({
handleUpdateInput,
inputs,
handleCancelClick,
//setCurrentSkill,
}) => {
const [currentSkill, setCurrentSkill] = useState({});
const [isEditing, setIsEditing] = useState(true);
// const [ onSubmitEditing, SetOnSubmitEditing ] = useState("")
function handleEditInputChange(e) {
setCurrentSkill(e.target.value);
}
handleCancelClick = (e) => {
setIsEditing(false);
console.log("Cancel edit");
//return {...prevState, isEditing : isEditing }
};
return (
<>
{isEditing ? (
<div>
<h4>Edit Skill</h4>
<input
className="mb-2"
size="lg"
onChange={handleEditInputChange}
type="text"
name="Update skill"
placeholder="Update skill"
value={[inputs[0]]}
/>
<button className="btn btn-primary mx-2" onClick={handleUpdateInput}>
Update
</button>
<button onClick={() => handleCancelClick()}>Cancel</button>
</div>
) : null}
</>
);
};
export default EditSkillsForm;

Answer 1

If you are editing 1 element at a time you shouldn't pass all the inputs.
Only pass the object you wanna show/permit to edit.
const EditSkillsForm = ({
handleUpdateInput,
input,
handleCancelClick,
//setCurrentSkill,
})
...
<input
className="mb-2"
size="lg"
onChange={handleEditInputChange}
type="text"
name="Update skill"
placeholder="Update skill"
value={input}
/>