DragOverlay style properties getting applied with actual width, height, top and left coordinates on desktop but getting 0px values on mobile devices

[OmkarShinde1996]

Hi,

I am using the dnd-kit/core library for my project in which I am giving the node value to DragOverlay component and it is working as expected on desktop (when dragging the element the overlay starts displaying from the dragged element itself which is expected). but on mobile devices the overlay starts displaying from top left corner for each draggable element. when I inspect the DragOverlay component in chrome browser I observed that on desktop when dragging the element DragOverlay component gets the style applied with width, height, top and left coordinates (which is different for each element). but on mobile device this values are simply 0px because of which the overlay starts displaying from top left corner I think. Is there any way to resolve it? PFB code and screenshots for reference.

below is my code

import React, { useEffect, useState } from 'react'
import { SidebarBtnElementDragOverlay } from './SidebarBtnElement'
import { PageElements } from './PageElements'
import useDesigner from '@/hooks/useDesigner'


const DragOverlayWrapper = () => {
    const { elements } = useDesigner()
    const [draggedItem, setDraggedItem] = useState(null)
    useDndMonitor({
        onDragStart: ({active}) => {
            setDraggedItem(active)
        },
        onDragCancel: () => {
            setDraggedItem(null)
        },
        onDragEnd: () => {
            setDraggedItem(null)
        },
    })

    if (!draggedItem) return null
    let node = <div>no drag overlay</div>
    const isSidebarBtnElement = draggedItem.data?.current?.isDesignerBtnElement

    if (isSidebarBtnElement) {
        const type = draggedItem.data?.current?.type
        node = <SidebarBtnElementDragOverlay pageElement={PageElements[type]} />
    }

    const isDesignerElement = draggedItem.data?.current?.isDesignerElement

    if (isDesignerElement) {
        const elementId = draggedItem.data?.current?.elementId
        const element = elements.find(el => el.id === elementId)
        if (!element) {
            node = <div>Element not found!</div>
        } else {
            const DesignerElementComponent = PageElements[element.type].designerComponent
            node = <div className='flex bg-accent border rounded-md h-[100px] w-full py-2 px-4 opacity-80 pointer-events-none'>
                <DesignerElementComponent elementInstance={element} />
            </div>
        }
    }
    return (
        <DragOverlay>{node}</DragOverlay>
    )
}

export default DragOverlayWrapper

Mobile mode

Desktop mode