'useDrag method of react-dnd , cannot get isDragging in typescript

I am new to react with typescript, I am implementing drag and drop feature using react-dnd package with typescript. following this blog I am trying to drag images but I am facing an issue

Property isDragging does not exist on type unknown

code :

const [{ isDragging }, drag] = useDrag({
        // item denotes the element type, unique identifier (id) and the index (position)
        item: { type, id: image.id, index },
        // collect method is like an event listener, it monitors whether the element is dragged and expose that information
        collect: monitor => ({
          isDragging: monitor.isDragging()
        })
      });

the error I got : -

I am confused in the setting type of isDragging or how can I solve this error

Solution 1:^[1]

Got the answer from react-dnd TSX example

sandbox url

const [{ isDragging }, drag] = useDrag({
        type: "image",
        item: () => {
          return { id, index }
        },
        collect: (monitor: any) => ({
          isDragging: monitor.isDragging(),
        }),
      })

the type is not optional , we need to define type for same

Solution 2:^[2]

try to add this to you collect function

(monitor: DragSourceMonitor)

and of course you need to import this interface first

import { DragSourceMonitor } from 'react-dnd'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tanuj Doshi
Solution 2	Rudi Kurniawan

'useDrag method of react-dnd , cannot get isDragging in typescript

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]