Change position of the array depending on the input

Question

Supposed I have 3 items and each of them can be edited by the inputs of themselves. And that input is the edit for their positions in array. Example

Kraig:<input name="editposition" value = {position} onChange={e => e.target.value}>
Adams:<input name="editposition" value = {position} onChange={e => e.target.value}>
Leonard:<input name="editposition" value = {position} onChange={e => e.target.value}>
Negz:<input name="editposition" value = {position} onChange={e => e.target.value}>

So each of them can be exchange position without an issue by specifying the index position of item target. I have an example code but I don't know how to do it, I was thinking that I could duplicate a list and try to pair them up but it doesn't work.

Here this is the output return wherein I will find my target object(name) and then It will exchange position with that array position that I specify.

{insertList}
<input type="text" name='name' value={Fname} onChange={e => setFname(e.target.value)} />
<input type="text" name='index' value={index} onChange={e => setIndex(e.target.value)} />

And the function to make it work

const insertList_ = ["Kraig","Madams","Laicht", "Matthew", "Creafre"]

const [Fname,setFname] = useState("");
const [index,setIndex] = useState(5);


insertList_.splice(index,0,Fname);


const insertList = insertList_.map((person,index) => {
    return(
        <h1 key={index}> {person}</h1>
    )
})

You can see here is that I insert it in the position that I want but I don't know how to exchange its position with that target array..This is just a sample how it works. Can anyone help me?

Please if you don't understand the question edit it for me..I don't know if my question is terrible.