You are an expert software engineer specialised in Next.js 14 with TypeScript. I am building a solution using @dnd-kit - "@dnd-kit/core": "^6.1.0" and "@dnd-kit/sortable": "^8.0.0".

I need you to review my code, make sure that there's nothing wrong with it. First, analyse in-depth all of its features and functionalities. Make sure these are performed correctly and coded correctly.

Here's my code solution:

```
import React, { useState } from "react";
import Image from "next/image";
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragOverlay,
  DragStartEvent,
  DragEndEvent,
  UniqueIdentifier,
} from "@dnd-kit/core";
import {
  arrayMove,
  horizontalListSortingStrategy,
  SortableContext,
  sortableKeyboardCoordinates,
  useSortable,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { IContainer } from ".";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { XIcon } from "lucide-react";

interface IProps {
  containers: IContainer[];
  imagesArray: File[][];
  setImagesArray: React.Dispatch<React.SetStateAction<File[][]>>;
}

interface SortableImageProps {
  file: File;
  index: number;
  containerId: number;
  onDelete: (containerId: number, index: number) => void;
}

const SortableImage: React.FC<SortableImageProps> = ({ file, index, containerId, onDelete }) => {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
    id: file.name,
    data: { type: "image", containerId, index },
  });

  const style = { transform: CSS.Transform.toString(transform), transition };

  return (
    <div className="relative flex shrink-0 border">
      <div ref={setNodeRef} style={style} {...attributes} {...listeners} className="relative w-fit h-fit cursor-grab">
        <Image src={URL.createObjectURL(file)} height={240} width={240} alt={`Image ${index}`} className="h-fit w-60" unoptimized />
      </div>
      <Button
        onClick={() => onDelete(containerId, index)}
        variant="destructive"
        size="icon"
        className="top-1 right-1 absolute opacity-20 hover:opacity-60"
      >
        <XIcon className="h-5 w-5" />
      </Button>
    </div>
  );
};

const ImagesContainer: React.FC<{
  direction: "vertical" | "horizontal";
  className: string;
  label?: string;
  images: File[];
  containerId: number;
  onDelete: (containerId: number, index: number) => void;
}> = ({ direction, className, label, images, containerId, onDelete }) => {
  const { setNodeRef } = useSortable({ id: `container-${containerId}`, data: { type: "container", containerId } });

  return (
    <div
      ref={setNodeRef}
      className={`min-h-80 min-w-64 flex flex-col shrink-0 overflow-hidden border rounded ${
        direction === "vertical" ? "h-full w-fit" : images.length === 0 ? "h-fit w-fit" : "h-fit w-full"
      }`}
    >
      {!!label && <h3 className="h-12 flex items-center font-medium px-4">{label}</h3>}
      <div className={cn("flex gap-4 p-4", className)}>
        <SortableContext
          items={images.map((file) => file.name)}
          strategy={direction === "vertical" ? verticalListSortingStrategy : horizontalListSortingStrategy}
        >
          {images.map((file, index) => (
            <SortableImage key={file.name} file={file} index={index} containerId={containerId} onDelete={onDelete} />
          ))}
        </SortableContext>
      </div>
    </div>
  );
};

const ImagesContainers: React.FC<IProps> = ({ containers, imagesArray, setImagesArray }) => {
  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);

  const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));

  const handleDragStart = (event: DragStartEvent) => {
    setActiveId(event.active.id);
  };

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;

    if (!over) return;

    const activeData = active.data.current;
    const overData = over.data.current;

    if (!activeData || !overData) return;

    const activeContainerId = activeData.containerId;
    const overContainerId = overData.type === "container" ? overData.containerId : overData.containerId;

    if (typeof activeContainerId !== "number" || typeof overContainerId !== "number") return;

    setImagesArray((prevImagesArray) => {
      const activeContainer = prevImagesArray[activeContainerId];
      if (!activeContainer) return prevImagesArray;

      const activeIndex = activeContainer.findIndex((file) => file.name === active.id);
      if (activeIndex === -1) return prevImagesArray;

      const newImagesArray = [...prevImagesArray];

      if (activeContainerId === overContainerId) {
        // Moving within the same container
        const overIndex =
          overData.type === "container"
            ? newImagesArray[overContainerId].length
            : newImagesArray[overContainerId].findIndex((file) => file.name === over.id);

        newImagesArray[activeContainerId] = arrayMove(newImagesArray[activeContainerId], activeIndex, overIndex);
      } else {
        // Moving between containers
        const [movedItem] = newImagesArray[activeContainerId].splice(activeIndex, 1);

        if (overData.type === "container") {
          // Dropping onto a container
          newImagesArray[overContainerId].push(movedItem);
        } else {
          // Dropping onto an image in another container
          const overIndex = newImagesArray[overContainerId].findIndex((file) => file.name === over.id);
          newImagesArray[overContainerId].splice(overIndex, 0, movedItem);
        }
      }

      return newImagesArray;
    });

    setActiveId(null);
  };

  const handleDelete = (containerId: number, index: number) => {
    setImagesArray((prevImagesArray) => {
      const newImagesArray = [...prevImagesArray];
      newImagesArray[containerId] = [...newImagesArray[containerId].slice(0, index), ...newImagesArray[containerId].slice(index + 1)];
      return newImagesArray;
    });
  };

  const activeFile = activeId ? imagesArray.flat().find((file) => file.name === activeId) : null;

  return (
    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
      <div className="h-full w-full flex overflow-hidden gap-8 pl-8 pb-8 lg:pl-24">
        <ImagesContainer
          key={0}
          direction={imagesArray.length > 1 ? "vertical" : "horizontal"}
          className={`h-full ${imagesArray.length > 1 ? "min-w-60 w-fit flex-col" : "w-full flex-wrap"} overflow-x-hidden overflow-y-auto`}
          label={imagesArray.length > 1 ? "Staging" : undefined}
          images={imagesArray[0]}
          containerId={0}
          onDelete={handleDelete}
        />
        {imagesArray.length > 1 && (
          <div className="h-full w-full flex flex-wrap overflow-x-hidden content-start overflow-y-auto gap-8 pr-8 lg:pr-24">
            {imagesArray.slice(1).map((images, index) => (
              <ImagesContainer
                key={index + 1}
                direction="horizontal"
                className="h-full w-full overflow-x-auto overflow-y-hidden"
                label={containers[index].label}
                images={images}
                containerId={index + 1}
                onDelete={handleDelete}
              />
            ))}
          </div>
        )}
      </div>
      <DragOverlay>
        {activeFile && (
          <div className="relative h-fit w-fit opacity-50 hover:cursor-grabbing transition-none">
            <Image
              src={URL.createObjectURL(activeFile)}
              height={160}
              width={160}
              alt="Dragging"
              className="h-fit w-40 flex shrink-0 border"
              unoptimized
            />
          </div>
        )}
      </DragOverlay>
    </DndContext>
  );
};

export default ImagesContainers;
```