Как реализовать перетаскивание в компоненте на основе классов в react-dnd

Question

Я новичок в реакции и пытаюсь реализовать перетаскивание с помощью response-dnd. Однако я не могу использовать хуки в компонентах на основе классов. Я получаю сообщение об ошибке из-за приведенной ниже части кода.

 const [{ isDragging }, drag] = useDrag({
           item: { type: ItemTypes.Student },
          collect: (monitor) => ({
            isDragging: !!monitor.isDragging(),
          }),
        });

Как я могу реализовать ту же функциональность, по-прежнему используя компоненты на основе классов? Ниже полный код

class App extends Component {
  state = {
    values: [],
  };
const [{ isDragging }, drag] = useDrag({
      item: { type: ItemTypes.Student },
      collect: (monitor) => ({
        isDragging: !!monitor.isDragging(),
      }),
    });

  divStyle = {
    "margin-left": "20px",
  };

  componentDidMount() {
    axios.get("http://localhost:5000/api/student").then((response) => {
      this.setState({
        values: response.data,
      });
    });
  }

  render() {

    return (
      <div
        ref={drag}
        style={{
          opacity: isDragging ? 0.5 : 1,
          fontSize: 25,
          fontWeight: "bold",
          cursor: "move",
        }}
      >
        <Header as="h2">
          <Icon name="users" />
          <Header.Content>Reactivities</Header.Content>
        </Header>

        {this.state.values.map((student: any) => (
          <DndProvider backend={Backend}>
            <List key={student.id} relaxed>
              <List.Item>
                <Image
                  style={this.divStyle}
                  avatar
                  src="https://react.semantic-ui.com/images/avatar/small/daniel.jpg"
                />
                <List.Content>
                  <List.Header as="a">
                    {student.firstName} {student.lastName}
                  </List.Header>
                  <List.Description></List.Description>
                </List.Content>
              </List.Item>
            </List>
          </DndProvider>
          //  <List.Item key={value.id}>{value.name}</List.Item>
        ))}
      </div>
    );
  }
}

export default App;