O elemento de entrada não possui atributo somente leitura, mas os campos ainda não podem ser editados [fechado]

Estou criando um formulário no React e tenho campos que são preenchidos com os dados do servidor. Os campos devem mostrar ao usuário o que está lá atualmente e também permitir que eles editem os dados quando enviarem o formulário. No entanto, quando tento digitar nos campos de entrada, nada acontece. O texto é selecionável, mas imutável.

Isso pode ser porque eu preenchi os campos com dados armazenados em variáveis ​​de estado e, portanto, mantém um valor perpétuo do que está recebendo do servidor?

Essa parte do código é a função responsável por ler os dados do servidor e definir as variáveis ​​de estado que são passadas para o componente Form .

const [templateId, setTemplateId] = useState("");
const [templateData, setTemplateData] = useState([]);

function mkForm(selection) {
    if(selection !== "newTemplate"){
        fetch(`http://localhost:3000/custom/${selection}`)
        .then((response) => response.json())
        .then((data)=>{
            setTemplateId(data.id)
            setTemplateData(Object.entries(data.myData));
        })
    } else{
        setTemplateId("");
        setTemplateData([]);
    }
}

Este é o componente Form que recebe as props, esta parte mostra apenas o código que cria os campos de entrada da prop templateData . O campo de entrada templateId está sendo retornado na instrução de retorno principal do componente, mas é praticamente o mesmo.

function Form({templateId, templateData}) {
    const showData = templateData.map((item)=>{
        return(
            <div onChange={foo}>
                <input value={item[0]}/> <input value={item[1]} />
            </div>
        )
   })
   ... etc.
   ... etc.
}

Eu mudei alguns nomes de variáveis ​​para mostrar as variáveis ​​de estado e props relacionadas.