select only one checkbox react when they are mapped inputs

so I am creating this table where I take the attendance of someone. I did a table when I show the players and give them false values by default. So I want to it be when you can select only one of the option, the person is present, missing, injured, sick or late.

I saw some things like this but cant find something that truly helps or work fully

this is the link to the code: https://stackblitz.com/edit/react-uwhyxm

this is the code :

import React, { useState, useEffect } from 'react';
import './style.css';

export default function App() {
  const [players, setPlayers] = useState([]);

  useEffect(() => {
    let players = [
      { name: 'gimi', id: '1' },
      { name: 'miri', id: '2' },
      { name: 'beni', id: '3' },
      { name: 'cimi', id: '4' },
      { name: 'bani', id: '5' },
      { name: 'bvbd', id: '6' },
      { name: 'bvdb', id: '7' },
    ];

    setPlayers(
      players.map((d) => {
        return {
          name: d.name,
          pressent: false,
          late: false,
          injured: false,
          sick: false,
          missing: false,
          id: d.id,
        };
      })
    );
  }, []);
  const send = () => {
    console.table(players);
  };
  // console.table(players);

  return (
    // <div className="Container">
    //   <div className="flex">
    //     <div className="buttonWrapper">
    //       <button className="button">Save</button>
    //     </div>
    //   </div>
    // </div>
    <div className="tabelDiv">
      <table border="1px">
        <tr>
          <th>Player</th>
          <th>pressent</th>
          <th>late</th>
          <th>injured</th>
          <th>sick</th>
          <th>missing</th>
        </tr>
        {players.map((d, i) => (
          // return (
          <tr key={d.id}>
            <td> {d.name} </td>
            <td>
              <input
                onChange={(event) => {
                  let checked = event.target.checked;
                  setPlayers(
                    players.map((data) => {
                      if (d.id === data.id) {
                        data.pressent = checked;
                      }
                      return data;
                    })
                  );
                }}
                type="checkbox"
                checked={d.select}
              ></input>
            </td>
            <td>
              <input
                onChange={(event) => {
                  let checked = event.target.checked;
                  setPlayers(
                    players.map((data) => {
                      if (d.id === data.id) {
                        data.late = checked;
                      }
                      return data;
                    })
                  );
                }}
                type="checkbox"
                checked={d.select}
              ></input>
            </td>
            <td>
              <input
                onChange={(event) => {
                  let checked = event.target.checked;
                  setPlayers(
                    players.map((data) => {
                      if (d.id === data.id) {
                        data.injured = checked;
                      }
                      return data;
                    })
                  );
                }}
                type="checkbox"
                checked={d.select}
              ></input>
            </td>
            <td>
              <input
                onChange={(event) => {
                  let checked = event.target.checked;
                  setPlayers(
                    players.map((data) => {
                      if (d.id === data.id) {
                        data.sick = checked;
                      }
                      return data;
                    })
                  );
                }}
                type="checkbox"
                checked={d.select}
              ></input>
            </td>
            <td>
              <input
                onChange={(event) => {
                  let checked = event.target.checked;
                  setPlayers(
                    players.map((data) => {
                      if (d.id === data.id) {
                        data.missing = checked;
                      }
                      return data;
                    })
                  );
                }}
                type="checkbox"
                checked={d.select}
              ></input>
            </td>
          </tr>
          // );
        ))}
      </table>

      <button onClick={send}>send</button>

      {/* <button class="noselect">
        <span class="text">Delete</span>
        <span class="icon">
          <svg
            viewBox="0 0 24 24"
            height="24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"></path>
          </svg>
        </span>
      </button> */}
    </div>
  );
}

best would be that he would select one the other deselect not having to click again to uncheck but this isn't necessary. would really appreciate if someone took a look at this