I have this component I am rending

    <div className="flex flex-1 flex-col items-center w-full mt-16">
      <div className="w-full sm:w-1/4">
        <h1 className="text-4xl font-bold">Categories</h1>
        <p className="font-light">Organize your expenses into a category.</p>
      </div>
      <div className="w-full sm:w-1/4 mt-8 mb-2 flex flex-row justify-end">
        <Link href="/categories/add">
          <Button variant="secondary" className="group">
            <CirclePlusIcon
              color="gray"
              className="group-hover:scale-90 transform duration-300"
            />
          </Button>
        </Link>
      </div>
      <div className="w-full sm:w-1/4 space-y-2">
        {categories.length === 0 ? (
          <div className="space-y-2">
            <Skeleton className="h-[125px] w-full rounded-xl" />
            <Skeleton className="h-[125px] w-full rounded-xl" />
            <Skeleton className="h-[125px] w-full rounded-xl" />
          </div>
        ) : (
          categories.map((category) => (
            <Card className="w-full p-4 space-y-2" key={category.name}>
              <div className="flex flex-row justify-between">
                <CardTitle>{category.name}</CardTitle>
                {isDesktop ? (
                  <DesktopDialog category={category} />
                ) : (
                  <MobileDrawer category={category} />
                )}
              </div>
              <Badge variant="outline">{category.bucket}</Badge>
              <p className="text-sm font-light">{category.description}</p>
            </Card>
          ))
        )}
      </div>
    </div>

Note that there is categories.map() which is mapping categories to a Card. The information about the category is correct for every single use of category in the card except when it gets passed to <DesktopDialog/> or <MobileDrawer/>. The category prop that is being passed to those is the category that is at the end of the list. No matter what card i click on for that component, it is the last category in the array.

const DesktopDialog = ({ category }: { category: Category }) => {
    return (
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <Trash2Icon
            color="gray"
            size={18}
            className="hover:scale-90 transform duration-300 hover:cursor-pointer"
          />
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Category "{category.name}"</DialogTitle>
            <DialogDescription>
              This will remove categories from some transactions. You will need
              to go back and change those.
            </DialogDescription>
          </DialogHeader>
          <div className="w-full flex flex-row space-x-2">
            <DialogClose asChild>
              <Button className="w-1/2" variant="outline">
                Cancel
              </Button>
            </DialogClose>
            <Button className="w-1/2" onClick={() => deleteCategory(category)}>
              Continue
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    );

This is the component it is being passed to.

Any help thanks!