Component

import React from 'react'
import { useDrag } from 'react-dnd'

export function SortedListItem(props){

  const { data } = props
  const [{ opacity }, dragRef] = useDrag(
      () => ({
        type: "CARD",
        item: "1",
        collect: (monitor) => ({
          opacity: monitor.isDragging() ? 0.5 : 1
        })
      }),
      []
    )
  return (
      <div ref={dragRef} >
          <li>{data.name}</li>
          {props.children}
      </div>
  )
}