I am using react beautiful dnd to create a drag and drop effect in an image gallery. But elements don't drag

Question

I have this code in the gallery component.

import { useState } from "react";
import { images } from "../assets";
import { DragDropContext, Draggable, Droppable, OnDragEndResponder } from "react-beautiful-dnd";

export const Gallery = () => {

    const [characters, updateCharacters] = useState(images);

    const handleOnDragEnd: OnDragEndResponder = (result) => {
        if (!result.destination) return;

        const items = Array.from(characters);
        const [reorderedItem] = items.splice(result.source.index, 1);
        items.splice(result.destination.index, 0, reorderedItem);

        updateCharacters(items);
    }

    return (
        <DragDropContext onDragEnd={handleOnDragEnd} >
            <Droppable droppableId="images">
                {(provided) => (
                    <ul
                        {...provided.droppableProps}
                        ref={provided.innerRef}
                        style={{
                            display: "flex",
                            flexWrap: "wrap",
                            padding: 0,
                        }}
                        className="images"
                    >
                        {
                            characters.map(({ id, name, thumb }, index) => {
                                return (
                                    <Draggable
                                        key={id}
                                        draggableId={id}
                                        index={index}
                                    >
                                        {(provided, snapshot) => (
                                            <li
                                                style={{
                                                    margin: "0 2rem 0"
                                                }}
                                                {...provided.draggableProps}
                                                {...provided.dragHandleProps}
                                                draggable={true}
                                                ref={provided.innerRef}
                                            >
                                                <img
                                                    src={thumb} alt="bird from Rob Potter on unsplash"
                                                    style={{ width: "250px", height: "370px" }}
                                                    draggable={true}
                                                />
                                            </li>
                                        )}
                                    </Draggable>
                                )
                            })
                        }
                        {provided.placeholder}
                    </ul>
                )}
            </Droppable>
        </DragDropContext>
    )
}

I tried to use react beautiful dnd to implement drag and drop in a gallery react project. I expected the elements to be draggable and droppable, that way they could be rearranged in the gallery. But the elements don't seem to drag, talkless of drop.