removing an element in array within map in react

On the click of the span, i want to remove that element from the array and run the map again so that the spans also gets removed. I don’t know if the syntax is wrong or what. This is the link to sandbox where I wrote my code. https://codesandbox.io/s/angry-wu-4dd11?file=/src/App.js

import "./styles.css";

export default function App() {
  const data = [{
      name: "Alex",
    },
    {
      name: "John",
    },
    {
      name: "Leo",
    },
    {
      name: "Murphy",
    },
    {
      name: "Alex",
    },
    {
      name: "John",
    },
    {
      name: "Leo",
    },
    {
      name: "Murphy",
    },
  ];

  return ( <
    div className = "App" > {
      data.map(function(val, id) {
        return ( <
          span key = {
            id
          }
          className = "select__item"
          onClick = {
            (e) => {
              data.splice(data.indexOf(val), id + 1);
              console.log(data);
            }
          } >
          {
            val.name
          } < br / > < br / >
          <
          /span>
        );
      })
    } <
    /div>
  );
}