My click handler is firing twice with different values in React

I can't for the life of me figure out why my onClick handler is being called twice...

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

export const AllModels = ({
  label,
  name,
  checked,
  handleSelectAll
}: {
  label: string;
  name: string;
  checked: boolean;
  handleSelectAll: () => void;
}) => {
  return (
    <div>
      <div className="checkbox" onClick={handleSelectAll}>
        <input
          className="checkbox-input"
          id="all-models"
          type="checkbox"
          name={name}
          value={`${checked}`}
        />
        <label className="label label--checkbox" htmlFor="all-models">
          <span className="label-title">{label}</span>
        </label>
      </div>
    </div>
  );
};

export const App = (): React.ReactElement => {
  const [allModelsChecked, setAllModelsChecked] = useState<boolean>(false);

  const handleSelectAll = (): void => {
    console.log({ allModelsChecked });
    if (allModelsChecked) {
      setAllModelsChecked(false);
    } else {
      setAllModelsChecked(true);
    }
  };

  return (
    <AllModels
      label="All Models"
      name="allModels"
      checked={allModelsChecked}
      handleSelectAll={handleSelectAll}
    />
  );
};

The console log is showing

{allModelsChecked: false}
{allModelsChecked: true}

I am running React.StrictMode, but I don't believe I am mutating state as far as I can tell.

Working example: https://codesandbox.io/s/quizzical-tree-gzofx?file=/src/App.tsx