I am new to react
Can you let me know why the below drag functionality not working.
I followed the below tutorial. I even debugged by putting console.log. console printing, but drag not working

Providing my code below. Can you let me know how to fix it.

https://stackblitz.com/edit/react-vof2po?file=src%2FApp.js,src%2Fstyle.css,public%2Fimages%2Fcato.png

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import './style.css';

const finalSpaceCharacters = [
  {
    id: 'gary',
    name: 'Gary Goodspeed',
    thumb: '',
  },
  {
    id: 'cato',
    name: 'Little Cato',
    thumb: '',
  },
  {
    id: 'kvn',
    name: 'KVN',
    thumb: '',
  },
  {
    id: 'mooncake',
    name: 'Mooncake',
    thumb: '',
  },
  {
    id: 'quinn',
    name: 'Quinn Ergon',
    thumb: '',
  },
];

function App() {
  const [characters, updateCharacters] = useState(finalSpaceCharacters);

  function handleOnDragEnd(result) {
    console.log('handleOnDragEnd', 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 (
    <div className="App">
      <header className="App-header">
        <h1>Final Space Characters</h1>
        <DragDropContext onDragEnd={handleOnDragEnd}>
          <Droppable droppableId="characters">
            {(provided) => (
              <ul
                className="characters"
                {...provided.droppableProps}
                ref={provided.innerRef}
              >
                {characters.map(({ id, name, thumb }, index) => {
                  return (
                    <Draggable key={id} draggableId={id} index={index}>
                      {(provided) => {
                        console.log('Draggable component rendered'); // Add this line
                        return (
                          <li
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                          >
                            {/* <div className="characters-thumb">
                              <img src={thumb} alt={`${name} Thumb`} />
                            </div> */}
                            <p>{name}</p>
                          </li>
                        );
                      }}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </DragDropContext>
      </header>
      <p>
        Images from <a href="(link unavailable)">Final Space Wiki</a>
      </p>
    </div>
  );
}

export default App;