Как сделать добавление, удаление, редактирование?

ребята, подскажите пожалуйста как исправить код чтобы работало добавление, удаление, редактирование , у меня когда на кнопку нажимаю все исчезает. Мой код вложение, также sandbox https://codesandbox.io/s/intelligent-mopsa-ttk8sm?file=/src/App.js

App.js

import React, { useState } from "react";

function App() {
  const [arr, setArr] = useState([]);
  const [value, setValue] = useState("");

  const result = arr.map((element, index) => {
    return (
      <p key={index} onDoubleClick={() => remove(index)}>
        {element} +"X"
      </p>
    );
  });

  function remove(index) {
    setArr([...arr.slice(0, index), ...arr.slice(index + 1)]);
  }

  function add() {
    // добавление элемента
    setArr([...arr, value]);
  }

  function changeValue(event) {
    // изменение содержания поля input
    setValue(event.target.value);
  }

  return (
    <div>
      {result}
      <form>
        <input type="text" placeholder="" />
        <input onClick={changeValue} />
        <button onClick={add}>Добавить</button>
      </form>
    </div>
  );
}

export default App;

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);