reactjs - La tecla Enter no activa onClick al navegar por pestañas en un div

Estoy intentando hacer que cierta página sea accesible y permitir la interacción usando solo el teclado. El problema con el que me estoy encontrando es que tengo una selección pseudo-radio que funciona utilizando el estado de React y los elementos de tarjeta de Material UI.

Tengo un onClick listener para cada tarjeta que actualiza la variable de estado y funciona bien cuando hago clic con el mouse. Cuando uso la navegación por tabulación para seleccionar la tarjeta y luego presiono la tecla Enter, por alguna razón no se activa el evento de clic.

El código específico en cuestión es el siguiente:

import {
  Stack,
  Typography,
  Card,
  CardContent,
  CardActionArea,
} from "@mui/material";

import { useState } from "react";
import { AddOutlined, SyncOutlined } from "@mui/icons-material";

export default function CreateAssignment() {
  const [type, setType] = useState<"create" | "assign">("create");

  return (
    <Stack
      direction={"row"}
      alignItems={"center"}
      justifyContent={"center"}
      spacing={4}
      marginY={6}
    >
      <Card
        tabIndex={1}
        sx={(theme) => ({
          width: 200,
          border:
            type === "create"
              ? "5px solid " + theme.palette.secondary.main
              : "5px solid white",
          borderRadius: 6,
        })}
      >
        <CardActionArea onClick={() => setType("create")}>
          <CardContent>
            <AddOutlined style={{ fontSize: 48 }} />
            <Typography gutterBottom variant="body1" fontSize={20}>
              Create A New Device To Assign
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
      <Card
        tabIndex={2}
        sx={(theme) => ({
          width: 200,
          border:
            type === "assign"
              ? "5px solid " + theme.palette.secondary.main
              : "5px solid white",
          borderRadius: 6,
        })}
      >
        <CardActionArea onClick={() => setType("assign")}>
          <CardContent>
            <div>
              <SyncOutlined style={{ fontSize: 48 }} />
            </div>
            <Typography gutterBottom variant="body1" fontSize={20}>
              Reassign Existing Device
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    </Stack>
  );
}