How to render a component for particular element in a array

I have an array, for which a component (<span>Delete</span> in my case) needs to be shown only if the array length is greater than 2 and also, not show in first two array elements but show in other elements.

Example:
array = ["One","Two","Three","Four"]
Show <span>Delete</span> in "Three" and "Four" as the array is greater than length 2.
In the above case, even if the array is greater than length 2 don’t show in first two elements ( "One" and "Two" ).

Code:

const App = () => {
  const [element, setElement] = useState(["element"]);

  return (
    <>
      {element.map((e) => (
        <div>
          <span>{e}</span>
          {element.length > 2 &&  <span style={{color:"red"}}>{" "}Delete</span>}
          </div>
      ))}

      <button onClick={() => setElement((element) => [...element, "element"])}>Add</button>
    </>
  );
};

The above code shows "Delete" text in all the elements

instead should show only for elements after the 2nd index.

CodeSandbox: https://codesandbox.io/s/basic-antd-4-16-9-forked-2w3lg5?file=/index.js:98-478

>Solution :

Use the index of the element you’re iterating over (the second argument in the .map callback) to check if the index is 2 or more – if so, you can show the delete, otherwise don’t show it.

const App = () => {
  const [elements, setElements] = useState(["element"]);

  return (
    <>
      {elements.map((e, i) => (
        <div>
          <span>{e}</span>
          {elements.length > 2 && i >= 2 && <span style={{color:"red"}}>{" "}Delete</span>}
        </div>
      ))}

(Because the state is an array, making its name plural makes a lot more sense than a singular element, which sounds like an array item)