"Invalid hook call. Hooks can only be called inside of the body of a function component" when trying to use React hooks

Question

I used React dnd. But when I tried to run, the following error came.

Invalid hook call. Hooks can only be called inside of the body of a function component

This was the code I tried

import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import DragDrop from "./components/DragDrop";

function App() {
  return (
    <DndProvider backend={HTML5Backend}>
      <div className="App">
        <DragDrop />
      </div>
    </DndProvider>
  );
}

export default App;  

Can someone explain me what is the issue?

I expected a webpage to appear. But nothing appeared on the screen