How do i implement react-dnd-text-dragpreview in a Functional Component?

Question

i'm using react-dnd and i'm able to put an image when draging, but now i would like to instead of a image i want a custom text.

i found this component react-dnd-text-dragpreview, but the example is for react class component.

i've tried to put "dragPreviewImage" in the src of "DragPreviewImage" , but doesn't work.

can someone help me on this ?

thanks in advance !

https://www.npmjs.com/package/react-dnd-text-dragpreview

sample code

...
import { DragPreviewImage, useDrag } from 'react-dnd';
import { boxImage } from '../components/boxImage';
import { createDragPreview } from 'react-dnd-text-dragpreview'


function FieldDrag({ field, dropboxField, onDragEnd = () => null, setFieldValue = () => null, cargoCategories }) {
const [{ isDragging }, drag, preview] = useDrag(() => ({
    type: 'field',        
    item: { id: field.id, dragCargoInfoId: field.dragCargoInfoId, dragCargoInfo: field.childDragCargoInfo },
    collect: (monitor) => ({
        isDragging: !!monitor.isDragging(),
    }),
    end: (item) => endDrag(item),
}));

const endDrag = (item) => {
    onDragEnd(item);
};

const styles = {
  fontSize: '12px'
}

const dragPreviewImage = createDragPreview('Custom Drag Text', styles);

.....

 return (
  <>
    <DragPreviewImage connect={preview} src={boxImage} />
    <span ref={drag} className="flex-item" style={{ ...computedStyle, ...styleDropboxField }}>
        {getField(field, extraStyle, isboxed, cargoCategories)}
    </span>
  </>
);

drag with image

Answer 1

I found the solution in the codesandbox --> https://codesandbox.io/s/uoplz?file=/src/module-list.jsx:2522-2619

just put src image "dragPreviewImage.src".

<DragPreviewImage connect={preview} src={dragPreviewImage && 
   dragPreviewImage.src} />