Webdriver io - Drag and Drop | Not able to see it happening but code passes

Question

I am trying to implement the Drag and drop feature using webdriver io and the issue i am facing is that the code passes but i dont see dragging and dropping the file ..

X-paths are proper as it runs properly in selenium webdriver

npm -v
6.14.14

node -v
v14.17.4

Below is the code

get imageSource(){return $(`#source`)}
get imageDestination(){return $(`#destination`)}

async dragAndDropImage() {
        try {   
            
            await (await this.imageSource).waitForDisplayed()
            await (await this.imageDestination).waitForDisplayed()

            await this.imageSource.dragAndDrop(await this.imageDestination,{duration:6000})
            
            await browser.pause(10000)

        } catch (err) {
            err.message=`Error when dragging image file`
            throw err
        }
    }

enter image description here