Сделайте onlick и drag drop вместе в reactjs

hi guys i try to make some website like stream video in react js, so i want to make queue list and the queue have 2 function , drag drop for move the list in queue and onclik for run the video to div tag. my question is how to make queue like that , so i can do dragdrop without onclick or onlick without dragdrop

import React, { useState } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import uuid from "uuid/v4";
import "./Components.css";

const itemsFromBackend = [
  {
    id: uuid(),
    title: "video 1",
    singer: "The Valley",
    videoname: "video_test.mp4",
  },
  {
    id: uuid(),
    title: "video 2",
    singer: "asdafdss",
    videoname: "video_test2.mp4",
  },
  {
    id: uuid(),
    title: "video 3",
    singer: "dfgd",
    videoname: "video_test3.mp4",
  },
  { id: uuid(), title: "Fourth task", singer: "ssfd" },
  { id: uuid(), title: "Fifth task", singer: "sdfsdf" },
  { id: uuid(), title: "First task", singer: "sdfsfd" },
  { id: uuid(), title: "Second task", singer: "sdgsdg" },
  { id: uuid(), title: "Third task", singer: "sdfsd" },
  { id: uuid(), title: "Fourth task", singer: "sdfsd" },
  { id: uuid(), title: "Fifth task", singer: "sdfsf" },
];

const columnsFromBackend = {
  [uuid()]: {
    name: "Song Queue",
    items: itemsFromBackend,
  },
};

const onDragEnd = (result, columns, setColumns) => {
  if (!result.destination) return;
  const { source, destination } = result;

  if (source.droppableId !== destination.droppableId) {
    const sourceColumn = columns[source.droppableId];
    const destColumn = columns[destination.droppableId];
    const sourceItems = [...sourceColumn.items];
    const destItems = [...destColumn.items];
    const [removed] = sourceItems.splice(source.index, 1);
    destItems.splice(destination.index, 0, removed);
    setColumns({
      ...columns,
      [source.droppableId]: {
        ...sourceColumn,
        items: sourceItems,
      },
      [destination.droppableId]: {
        ...destColumn,
        items: destItems,
      },
    });
  } else {
    const column = columns[source.droppableId];
    const copiedItems = [...column.items];
    const [removed] = copiedItems.splice(source.index, 1);
    copiedItems.splice(destination.index, 0, removed);
    setColumns({
      ...columns,
      [source.droppableId]: {
        ...column,
        items: copiedItems,
      },
    });
  }
};

export default function Queuesong() {
  const [columns, setColumns] = useState(columnsFromBackend);
  const [queuevideo, setQueueVideo] = useState("");

  function playvideo() {}
  return (
    <div>
      <DragDropContext
        onDragEnd={(result) => onDragEnd(result, columns, setColumns)}
      >
        {Object.entries(columns).map(([columnId, column], index) => {
          return (
            <div key={columnId}>
              <div>
                <h5>{column.name}</h5>
              </div>

              <div className="queue-size" id="queues-scroll">
                <Droppable droppableId={columnId} key={columnId}>
                  {(provided, snapshot) => {
                    return (
                      <table
                        name="table"
                        {...provided.droppableProps}
                        ref={provided.innerRef}
                      >
                        {column.items.map((item, index) => {
                          return (
                            <tr name="tr" onClick={console.log("hello")}>
                              <Draggable
                                key={item.id}
                                draggableId={item.id}
                                index={index}
                              >
                                {(provided, snapshot) => {
                                  return (
                                    <div className="column">
                                      <td className="column1">{index + 1}</td>
                                      <td
                                        className="column2"
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}
                                        style={{
                                          userSelect: "none",
                                          backgroundColor: snapshot.isDragging
                                            ? "#ECECEC"
                                            : "#FFFFFF",
                                          ...provided.draggableProps.style,
                                        }}
                                      >
                                        <td className="title"> {item.title}</td>
                                        <td className="singer">
                                          {item.singer}
                                        </td>
                                      </td>
                                    </div>
                                  );
                                }}
                              </Draggable>
                            </tr>
                          );
                        })}
                        {provided.placeholder}
                      </table>
                    );
                  }}
                </Droppable>
              </div>
            </div>
          );
        })}
      </DragDropContext>
    </div>
  );
}