confusing

const Cards: React.FC<CardsProp> = ({data, myKey, inventory}) => {
    const ref = React.useRef<HTMLDivElement>(null)
    const TouchTransition = createTransition('touchstart', (event: any) => {
        return event.touches != null
    })
    const MouseTransition = createTransition('mousedown', (event) => {
        return true;
      });
    let name = `${inventory}-${myKey}`
    const [[dragProps], {html5: [html5Props, html5Drag], touch: [touchProps, touchDrag]}] = useMultiDrag({
    		// "type" is required. It is used by the "accept" specification of drop targets.
        type: 'box',
        item: { name },
    		// The collect function utilizes a "monitor" instance (see the Overview for what this is)
    		// to pull important pieces of state from the DnD system.
        end: (item, monitor) => {
            const dropResult = monitor.getDropResult<DropResult>()
            console.log(dropResult, TouchTransition, MouseTransition)
            if (item && dropResult) {
              
            }
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),            
        }),
    })

    const [[dropProps], {html5: [html5DropStyle, html5Drop], touch: [touchDropStyle, touchDrop]}] = useMultiDrop({
        accept: 'box',
        drop: () => ({ name: name }),
        collect: (monitor) => ({
          isOver: monitor.isOver(),
          canDrop: monitor.canDrop(),
        }),
    })

    touchDrag(touchDrop(ref));

    return (
        <div
            data-testid={`box`}
            className={`inventory-card slot-${inventory}-${myKey}`}
            ref = {ref}
        >
            {name}
            {data && <>
                {data.image && <img
              style={{marginTop: '10px'}}
              src={`${data.image}?w=164&h=164&fit=crop&auto=format`}
              srcSet={`${data.image}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
              alt={data.itemName}
              loading="lazy"
              draggable={false}
            />}
            <Typography sx={{position: 'absolute',top: '0',right: '5px', userSelect: 'none'}} variant="overline" display="block" gutterBottom>
                {data.itemAmount}
            </Typography>
            <Typography sx={{position: 'absolute',bottom: '0',left: '50%',transform: 'translate(-50%,0)', userSelect: 'none'}} variant="overline" display="block" gutterBottom>
                {data.itemName}
            </Typography>
            </>}

            {myKey < 6 && inventory === 'personal' && <Typography draggable={false} sx={{position: 'absolute',top: '0',left: '5px', userSelect: 'none'}} variant="overline" display="block" gutterBottom>
                {myKey}
            </Typography>}
        </div>
    )
}