datalist and two forms linked each other

Question

I have a problem with a double form in React with the html5 datalist tag.

I want to set two fields based on the data contained in datalist tag: the data is an Array of object contained in a hook. The data is like this:

I write these code:

    const [listaAmr , setListaAmr ] =  useState([]);
    const [codiceAmr, setCodiceAmr] = useState();
    const [nomeAmr,   setNomeAmr  ] = useState();

    const handleCodici= (event)=>{
     
    
    setCodiceAmr(event.target.value);
    setNomeAmr(event.target.value);    


   }

return ( 

  ....others insignificant code here 

<label for="codice-amr-input"> Inserisci codice:</label>
<input list="datalist-codiciAmr" type="text" value={codiceAmr} onSelect={handleCodici} name="codice-amr-input" />

<label for="nome-amr-input">inserisci nome:</label>
<input list="datalist-codiciAmr" type="text" value={nomeAmr} name="nome-amr-input" onSelect={handleCodici}/>


<datalist id="datalist-codiciAmr" >
    {listaAmr.map((item,index) =>   
<option key ={item.ID_CODICE_AMR} value={"Codice ["+item.CODICE_AMR+"] 
Nome ["+item.NOME_AMR+"]"} data-codice={item.CODICE_AMR} data-nome={item.NOME_AMR}>
</option>
                                        )}
                            </datalist>

)

The two fields are linked, if I insert the Amr code automatically the name will have to be entered and vice versa. The problem is that if I enter a value in a Form, the form crashes and I can no longer enter another input.

How I can use datalist with react without use the dom element? Where is my error?