How to use the react-dnd.DragLayer function in react-dnd

static defaultProps: CustomDragLayerProps = {
    isDragging: false,
    title: ""
  };

  render() {
    const { title, isDragging } = this.props;
    if (!isDragging) {
      return null;
    }

    return <div>this.props.title</div>;
  }
}

const DndCustomDragLayer = DragLayer(dragLayerCollect)(CustomDragLayer);

(DndCustomDragLayer.DecoratedComponent: typeof CustomDragLayer);

// Test Drag Drop Context
// ----------------------------------------------------------------------

type BoardProps = {
  width: number,
  height: number
};

class Board extends React.Component {
  static defaultProps: BoardProps = {
    width: 400,
    height: 400
  };

)}
      
    )
  }
}

function collect (monitor) {
  return {
    item: monitor.getItem(),
    type: monitor.getItemType(),
    currentOffset: monitor.getSourceClientOffset(),
    isDragging: monitor.isDragging()
  }
}

export default DragLayer(collect)(SegmentDragLayer)

render() {
    
    
    
    return <div style="{layerStyles}">
        <div style="{getItemStyles(this.props.currentOffset)}">
            {this.props.id} {this.props.name}
        </div>
    </div>;
  }
}

export default DragLayer(collect)(ItemPreview)

);
  }
}

TableOptionsColumnDragPreview.propTypes = {
  item: PropTypes.object,
  itemType: PropTypes.string,
  currentOffset: PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired
  })
};

export default DragLayer(collectDragLayer)(TableOptionsColumnDragPreview);

<div style="{previewPositionStyles}">
            {this.renderPreviewContent()}
          </div>
        
      
    );
  }
}

const collect = monitor =&gt; ({
  item: monitor.getItem(),
  clientOffset: monitor.getClientOffset(),
});

export default LibDragLayer(collect)(DragLayer);

/**
 * Column resize helper.
 * @module components/mosaic/ColumnResizeHelper
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DragLayer } from 'react-dnd';
import { map } from 'lodash';

@DragLayer(monitor => ({
  item: monitor.getItem(),
  itemType: monitor.getItemType(),
  initialOffset: monitor.getInitialSourceClientOffset(),
  currentOffset: monitor.getSourceClientOffset(),
  isDragging: monitor.isDragging(),
}))
/**
 * ColumnResizeHelper component class.
 * @function ColumnResizeHelper
 * @param {Object} props Component properties.
 * @param {Object} props.item Item to be dragged.
 * @param {string} props.itemType Item type to be dragged.
 * @param {Object} props.initialOffset Initial offset.
 * @param {Object} props.currentOffset Current offset.
 * @param {bool} props.isDragging Is dragging.
 * @returns {string} Markup of the component.

function getItemStyles(x, y) {
  if (!x) {
    return { display: 'none' }
  }

  return {
    pointerEvents: 'none',
    transform: `translate(${x}px, ${y}px) rotate(0.01turn)`,
  };
}


export const CardItemPreview = compose(
  DragLayer((monitor) => {
    const item = monitor.getItem()
    const offset = monitor.getSourceClientOffset() || {}
    return {
        ...item,
        x: offset.x,
        y: offset.y
    }
  }),
  mapProps(({ x, y, ...props }) => ({
    ...props,
    style: getItemStyles(x, y)
  }))
)(class Preview extends React.PureComponent {

  render() {
    const { currentOffset, boundingRect, style, ...props } = this.props

const ItemPreview = (props) => {
  if (!props.isDragging) {
    return <div style="{{display:">;
  } else if (props.itemType === 'paneElement') {
    return (
      <div style="{[styles.nodePreview,">
        {props.name}
      </div>
    );
  } else if (props.itemType === 'node') {
    return <div style="{{display:">;
  }
};

export default DragLayer(collect)(ItemPreview);
</div></div>

if (props.snapToGrid) {
    x -= initialOffset.x;
    y -= initialOffset.y;
    [x, y] = snapToGrid(x, y);
    x += initialOffset.x;
    y += initialOffset.y;
  }

  const transform = `translate(${x}px, ${y}px)`;
  return {
    WebkitTransform: transform,
    transform
  };
}

@DragLayer((monitor) => ({
  item: monitor.getItem(),
  itemType: monitor.getItemType(),
  initialOffset: monitor.getInitialSourceClientOffset(),
  currentOffset: monitor.getSourceClientOffset(),
  isDragging: monitor.isDragging()
}))
export default class CustomDragLayer extends Component {
  static propTypes = {
    item: PropTypes.object,
    itemType: PropTypes.string,
    initialOffset: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired
    }),
    currentOffset: PropTypes.shape({
      x: PropTypes.number.isRequired,

currentOffset: PropTypes.shape({
        x: PropTypes.number.isRequired,
        y: PropTypes.number.isRequired
    })
})

const dragCollect = (monitor) => {
    return {
        item: monitor.getItem(),
        itemType: monitor.getItemType(),
        isDragging: monitor.isDragging(),
        currentOffset: monitor.getSourceClientOffset()
    }
}

export default DragLayer(dragCollect)(CustomDragLayer)