I created a smaller version of my project where I wanted to demonstrate my problem with checkboxes. Basically, I want to remove the table row of the checkbox that has been checked.

1. My first problem arises when I click my checkbox where it doesn't return true but false on the initial click when checking the box using const checked = e.target.checked. Therefore I used if(!checked) to get around this problem. How do I get the checkbox to input true when I first click the unchecked box?

2. When I click on the checkbox, it'll push two ids of the same id into the array ids instead of one like this [123,123] how would I get around pushing only one?

function App() {
  let initialState = [
    {id: 123, text: "Hello world"},
    {id: 234, text: "Afternoon world"},
    {id: 345, text: "Evening world"}
  ];
  const [alerts, setAlerts] = useState(initialState);
  const [list, setList] = useState([]);
  // let ids = [];
  const handleRemove = () => {
    ids.forEach((id) => {
      setAlerts(alerts.filter((a) => a.id !== id))
    });
  };

  let ids = [];
  const addToList = (e, id) => {
    const checked = e.target.checked;
    if (!checked) {
     ids.push(id);
     console.log(ids);
    }
 };

  return (
    <div>
      <RuxTableBody>
        {alerts.map((alert) => {
          const { id, text } = alert;
          return (
            <RuxTableRow key={id}>
              <RuxCheckbox onClick={(e) => addToList(e, id)}>
                {text}
              </RuxCheckbox>
            </RuxTableRow>
          );
        })}
      </RuxTableBody>
      <RuxButton onClick={handleRemove}>Acknowledge</RuxButton>
    </div>
  );
}