how to clear part of the dom with react?

that we press the button which activates the delete function sometimes it works sometimes it doesn’t work.
I don’t know where the problem comes from I need help thanks in advance.

import { useState } from "react";

function MyElementDiv() {
  const [value, setValue] = useState("");
  const [element, setElement] = useState([]);

  const effacer = ({ target }) => {
    setElement((prevElements) => prevElements.filter((N) => N !== target.name));
  };

  const MyElementDiv = element.map((elements) => {
    return (
      <li id={elements}>
        <ul>{elements}</ul>
        <button onClick={effacer} name={elements}>
          effacer
        </button>
      </li>
    );
  });

  const Change = ({ target }) => {
    setValue(target.value);
  };
  const submit = (e) => {
    e.preventDefault();
    setElement((prev) => {
      return [...prev, value];
    });
  };

  return (
    <>
      <form>
        <input type="text" onChange={Change} value={value} />
        <button onClick={submit}>submit</button>
      </form>
      <div>{MyElementDiv}</div>
    </>
  );
}

export default MyElementDiv;

I would like when I press the button to delete the <li> tag containing the button to disappear.