How can I Use React Drag And Drop in 2 directions?

Question

I have a site where I am dragging items onto a character and would like to be able to drag on and off. I can get one or the other to work, but can't seem to get them to work at the same time.

const [{ isDragging } , drag] = useDrag(() => ({
      type: "weapon",
      item : { weapon: weapon},
      collect: (monitor) => ({
        isDragging: !!monitor.isDragging()
      })
    }))
    const [{ isOver } , drop] = useDrop(() => ({
      accept: "characterWeapon",
      drop : (item) => attemptUpgrade(item.weapon, weapon),//stakeWeapon(character, weapon)
      collect: (monitor) => ({
          isOver: !!monitor.isOver()
        })
  }))

<img className='slotPicture' ref={drop, drag}  onClick={() => attemptUnstake(character)} src={getUrl(characterInfo[1])} />