1. first you need to wrap your component around in the DndProvider and provide it with the HTML5Backend becasue we’re working with web pages.
import React, { Component } from "react";
import { render } from "react-dom";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

import "./style.css";

function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      <div class="app-container">....</div>

render(<App />, document.getElementById("root"));
  1. Now we have access to the react-dnd hooks like useDrag and useDrop