How to drag and drop table columns in react js?

I trying to make table columns change order by drag and drop , i tried a lot of libraries and the best i could do is this :

import React, { useState } from 'react';
import './list_de_tournees.css'
const Table = ({ columns }) => {
  const [currentColumns, setCurrentColumns] = useState(columns);

  const handleDragStart = (e, columnIndex) => {
    e.dataTransfer.setData('columnIndex', columnIndex);
  };

  const handleDragOver = (e, columnIndex) => {
    e.preventDefault();
    const dragIndex = e.dataTransfer.getData('columnIndex');
    if (dragIndex !== columnIndex) {
      const newColumns = [...currentColumns];
      const [draggedColumn] = newColumns.splice(dragIndex, 1);
      newColumns.splice(columnIndex, 0, draggedColumn);
      setCurrentColumns(newColumns);
    }
  };

  return (
    <table>
      <thead>
        <tr>
          {currentColumns.map((column, index) => (
            <th
              key={column.id}
              draggable
              onDr
              onDragStart={(e) => handleDragStart(e, index)}
              onDragOver={(e) => handleDragOver(e, index)}
            >
              {column.Header}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        <tr>
          {currentColumns.map((column, index) => (
            <td key={column.id}>
              {column.accessor === 'name' && 'alice'}
              {column.accessor === 'age' && '30'}
              {column.accessor === 'country' && 'USA'}
            </td>
          ))}
        </tr>
        <tr>
          {currentColumns.map((column, index) => (
            <td key={column.id}>
              {column.accessor === 'name' && 'Bob'}
              {column.accessor === 'age' && '25'}
              {column.accessor === 'country' && 'Canada'}
            </td>
          ))}
        </tr>
        <tr>
          {currentColumns.map((column, index) => (
            <td key={column.id}>
              {column.accessor === 'name' && 'Charlie'}
              {column.accessor === 'age' && '35'}
              {column.accessor === 'country' && 'UK'}
            </td>
          ))}
        </tr>
      </tbody>
    </table>
  );
};

const columns = [
  {
    Header: 'Name',
    accessor: 'name',
    id: '1',
  },
  {
    Header: 'Age',
    accessor: 'age',
    id: '2',
  },
  {
    Header: 'Country',
    accessor: 'country',
    id: '3',
  },
];

function App() {
  return (
    <div className="App">
      <Table columns={columns} />
    </div>
  );
}

export default App;

but I want it the table to be a static html table and draggable at the same time , i tried this :

  <td draggable onDragStart={(e) => handleDragStart(e, 0)} onDragOver={(e) => handleDragOver(e, 0)}>Alice</td>
    <td draggable onDragStart={(e) => handleDragStart(e, 1)} onDragOver={(e) => handleDragOver(e, 1)}>30</td>
    <td draggable onDragStart={(e) => handleDragStart(e, 2)} onDragOver={(e) => handleDragOver(e, 2)}>USA</td>

but it didn’t work , I couldn’t drag it .
I tried this in simple project of html,css and vanilla js and it work perfectly here example