React Grid Drag n Drop

Question

I would like to start by saying that I'm a beginner and I'm trying to learn React so please don't be too harsh if my question is dumb.

I'm trying to learn to animate my pages a bit, and I've seen that you can have a Drag and Drop feature on different elements on your page.

I've heard about libraries such as React DnD or Framer that can help you achieve that but I noticed from the tutorials I watched that they use react state in way or another. My grid is hard coded without using state and creating the layout using items.map() as people might normally do.

I want my grid to behave similarly to this one https://nevflynn.com/

I'm not sure how this person did it and if anyone can tell me what method he might have used or hint me in the right direction would be greatly appreciated!

function App() {
  return (
    <>
      <Header />

      <div className="grid-wrapper">
        <div className="box" id="one"></div>
        <div className="box"></div>
        <div className="box" id="three"></div>
        <div className="box"></div>
        <div className="box"></div>
        <div className="box"></div>
        <div className="box"></div>
        <div className="box"></div>
        <div className="box" id="ninth"></div>
      </div>
    </>
  );
}

Thank you for your time.

I tried making my grid using Framer and the recommended method.

The problem was that it wrapped my grid with a UL with each grid box being wrapped in an LI and the drag and drop animation was really off, seemed like it clearly is not the way to do it.

I've seen another method using React Grid DND but again I had to use state.

function App() {
  let [items, setItems] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9]);
  return (
    <>
      <Header />

      <div className="grid-wrapper">
        <Reorder.Group values={items} onReorder={setItems}>
          {items.map((item) => (
            <Reorder.Item value={item} key={item}>
              <div className="box" key={item}></div>
            </Reorder.Item>
          ))}
        </Reorder.Group>
      </div>
    </>
  );
}