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.

import { useState } from "react";
import "./styles.css";

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

    const removeItem = (index) => {
        setData(data.filter((o, i) => index !== i));
    };

    return (
        <div className="App">
            {data.map(function (val, id) {
                return (
                    <span
                        key={id}
                        className="select__item"
                        onClick={() => removeItem(id)}>
                        {val.name} <br />
                        <br />
                    </span>
                );
            })}
        </div>
    );
}