How does react-dnd's connectDragPreview() work?

export const tokenCollector: DragSourceCollector = (connect, monitor) => {  return {    connectDragSource: connect.dragSource(),    connectDragPreview: connect.dragPreview(),    isDragging: monitor.isDragging()  };};class TokenClass extends React.Component<TokenProps> {  componentDidMount() {    const { connectDragPreview } = this.props;    const img = new Image();    img.src = 'base64-image';    img.onload = () => connectDragPreview(img);  }  render() {    const { connectDragSource, isDragging, children } = this.props;    return connectDragSource(      <div style={{ opacity: isDragging ? 0.5 : 1 }}>        {children}      </div>    );  }}const dragSource = DragSource(DropType.Token, tokenSpec, tokenCollector)(TokenClass);export { dragSource as Token };

import React, { Component } from "react";import { DragSource } from "react-dnd";import logo from "./logo.svg";import { getEmptyImage } from "react-dnd-html5-backend";export const tokenCollector = (connect, monitor) => {  return {    connectDragSource: connect.dragSource(),    connectDragPreview: connect.dragPreview(),    isDragging: monitor.isDragging()  };};class TokenClass extends React.Component {  componentDidMount() {    const { connectDragPreview } = this.props;    // Use empty image as a drag preview so browsers don't draw it    // and we can draw whatever we want on the custom drag layer instead.    connectDragPreview(getEmptyImage());  }  render() {    const { connectDragSource, isDragging, children } = this.props;    return connectDragSource(      <div style={{ opacity: isDragging ? 0.5 : 1, backgroundColor: "green" }}>        {children}      </div>    );  }}const tokenSpec = {  beginDrag() {    return {};  }};export default DragSource("DropType.Markup", tokenSpec, tokenCollector)(  TokenClass);

import React, { Component } from "react";import { DragLayer } from "react-dnd";function getItemStyles(props) {  const { initialOffset, currentOffset } = props;  if (!initialOffset || !currentOffset) {    return {      display: "none"    };  }  let { x, y } = currentOffset;  const transform = `translate(${x}px, ${y}px)`;  return {    transform,    WebkitTransform: transform  };}class CustomDragLayer extends Component {  render() {    const isDragging = this.props.isDragging;    if (!isDragging) {      return null;    }    // You can specify acceptable type:    if (this.props.itemType !== "DropType.Markup") {      return null;    }    // The component will work only when dragging    return (      <div>        <div style={getItemStyles(this.props)}>Custom drag layer!</div>      </div>    );  }}function collect(monitor) {  return {    item: monitor.getItem(),    itemType: monitor.getItemType(),    initialOffset: monitor.getInitialSourceClientOffset(),    currentOffset: monitor.getSourceClientOffset(),    isDragging: monitor.isDragging()  };}export default DragLayer(collect)(CustomDragLayer); // eslint-disable-line new-cap

import React from 'react';import { DragSource } from 'react-dnd';/* ... */function collect(connect, monitor) {  return {    connectDragSource: connect.dragSource(),    connectDragPreview: connect.dragPreview()  };}class ComponentWithCopyEffect {  render() {    const { connectDragSource } = this.props;    return connectDragSource(      <div>        This div shows a plus icon in some browsers.      </div>,      { dropEffect: 'copy' }    );  }});ComponentWithCopyEffect = DragSource(/* ... */)(ComponentWithCopyEffect);class ComponentWithHandle {  render() {    const { connectDragSource, connectDragPreview } = this.props;    return connectDragPreview(      <div>        This div is draggable by a handle!        {connectDragSource(          <div>drag me</div>        )}      </div>    );  }}ComponentWithHandle = DragSource(/* ... */)(ComponentWithHandle);class ComponentWithImagePreview {  componentDidMount() {    const { connectDragPreview } = this.props;    const img = new Image();    img.src = '/image.jpg';    img.onload = () => connectDragPreview(img);  }  render() {    const { connectDragSource } = this.props;    return connectDragSource(      <div>        This div shows an image when dragged!      </div>    );  }}ComponentWithImagePreview = DragSource(/* ... */)(ComponentWithImagePreview);