Как изменить порядок динамических входов в реакции?

Я новичок в React и пока научился программировать только с помощью хуков.

Я сделал динамические входы, где пользователь может добавить столько входов, сколько захочет. Я хотел бы позволить пользователю изменить порядок входов.

Я попробовал некоторый код (см. Ниже), но это закончилось предупреждением.

Предупреждение: компонент изменяет управляемый вход на неуправляемый.

Как я могу изменить порядок входов?

const Questions = ({ questionsData, setQuestionsData, title, id }) => {
  console.info(questionsData);
  const handleSave = async () => {
    if (id) {
      try {
        const response = await axios.post("http://localhost:3001/update", {
          id: id,
          title: title,
          questions: questionsData,
        });
        alert(response.data);
      } catch (error) {
        console.info(error.message);
      }
    } else if (!id && title !== "") {
      try {
        const response = await axios.post("http://localhost:3001/create", {
          title: title,
          questions: questionsData,
        });
        alert(response.data.message);
      } catch (error) {
        console.info(error.message);
      }
    } else {
      alert("Le Formulaire doit avoir un titre.");
    }
  };

  return (
    <>
      {questionsData.map((question, index) => {
        return (
          <div key = {question + index} className = "questions">
            <div className = {question.type === "texte" ? "orange" : "red"}>
              <span>{question.type === "texte" ? "1" : "2"}</span>
              <img src = {Minus} alt = "" />
              <img
                src = {question.type === "texte" ? FileWhite : StarWhite}
                alt = ""
              />
            </div>
            <input
              type = "text"
              placeholder = "Ecrivez votre question"
              value = {question.title}
              onChange = {(event) => {
                let tab = [...questionsData];
                tab[index].title = event.target.value;
                tab[index].index = index;
                setQuestionsData(tab);
              }}
            ></input>
            <div>
              <img
                src = {ChevronUp}
                alt = "move up"
                onClick = {() => {
                  let tab = [...questionsData];
                  let item = tab.splice(index, 1);
                  tab.splice(index + 1, 0, item);
                  setQuestionsData(tab);
                }}
              />
              <img src = {ChevronDown} alt = "move down" />
              <img
                src = {SmallTrash}
                alt = "delete question"
                onClick = {() => {
                  let tab = [...questionsData];
                  tab.splice(index, 1);
                  setQuestionsData(tab);
                }}
              />
            </div>
          </div>
        );
      })}
      <div className = "questionType">
        <div
          className = "addText"
          onClick = {() => {
            let tab = [...questionsData];
            tab.push({ type: "texte", title: "", index: "" });
            setQuestionsData(tab);
          }}
        >
          <img src = {File} alt = "" />
          <p>Ajouter une question "Texte"</p>
        </div>
        <div
          className = "addNote"
          onClick = {() => {
            let tab = [...questionsData];
            tab.push({ type: "note", title: "", index: "" });
            setQuestionsData(tab);
          }}
        >
          <img src = {Star} alt = "" />
          <p>Ajouter une question "Note"</p>
        </div>
      </div>
      <div className = "save">
        <button onClick = {handleSave}>Sauvegarder</button>
      </div>
    </>
  );
};

export default Questions;