Drag and drop not working with cypress automated script - cypress

Question

this is the application html with drag and drop content
<li>
<a class='place_video help_fields_controller_place_video' data-kind='stimuli' data-type='place_video' href='#'>
Place Video
<b></b>
</a>
</li>
<li>
<a class='place_photo help_fields_controller_place_photo' data-kind='stimuli' data-type='place_photo' href='#'>
Place Photo
<b></b>
</a>
</li>
<li>
<a class='place_file help_fields_controller_place_file' data-kind='stimuli' data-type='place_file' href='#'>
Place File
<b></b>
</a>
</li>
<li>
<a class='place_link help_fields_controller_place_link' data-kind='stimuli' data-type='place_link' href='#'>
Survey Link
<b></b>
</a>
</li>
</ul>
<br style='clear:left'>
</div>
</div>
<div id='follow'>
<div class='box collapsable activity_controls js_collectors' href='/fields/new'>
<h3 class='clearfix box_header'>
<div class='controls'>
</div>
<a action='collapse' class='collapse' href='#'></a>
<span class='help_activities_controller_collectors'>
Collectors
</span>
</h3>
<div class='content'>
<ul id='sortable_collectors'>
<li>
<a class='paragraph_text help_fields_controller_paragraph_text' data-kind='collector' data-type='paragraph_text' href='#'>
Paragraph Text
<b></b>
</a>
</li>
<li>
<a class='single_line_text help_fields_controller_single_line_text' data-kind='collector' data-type='single_line_text' href='#'>
Single Line Text
<b></b>
</a>
</li>
<li>
<a class='website help_fields_controller_website' data-kind='collector' data-type='website' href='#'>
Website
<b></b>
</a>
</li>
<li>
<a class='date help_fields_controller_date' data-kind='collector' data-type='date' href='#'>
Date
<b></b>
</a>
</li>
<li>
<a class='request_photo help_fields_controller_request_photo' data-kind='collector' data-type='request_photo' href='#'>
Request Photo
<b></b>
</a>
</li>
<li>
<a class='request_file help_fields_controller_request_file' data-kind='collector' data-type='request_file' href='#'>
Request File
<b></b>
</a>
</li>
<li>
<a class='request_video help_fields_controller_request_video' data-kind='collector' data-type='request_video' href='#'>
Request Video
<b></b>
</a>
</li>
<li>
<a class='single_choice help_fields_controller_single_choice' data-kind='collector' data-type='single_choice' href='#'>
Single Choice
<b></b>
</a>
</li>
<li>
<a class='multiple_choice help_fields_controller_multiple_choice' data-kind='collector' data-type='multiple_choice' href='#'>
Multiple Choice
<b></b>
</a>
</li>
<li>
<a class='drop_down help_fields_controller_drop_down' data-kind='collector' data-type='drop_down' href='#'>
Drop Down
<b></b>
</a>
</li>
<li>
<a class='time help_fields_controller_time' data-kind='collector' data-type='time' href='#'>
Time
<b></b>
</a>
</li>
<li>
<a class='number help_fields_controller_number' data-kind='collector' data-type='number' href='#'>
Number
<b></b>
</a>
</li>
<li id='location-collector'>
<a class='location help_fields_controller_location' data-kind='collector' data-type='location' href='#'>
Location
<b></b>
</a>
</li>
</ul>
<br style='clear: left'>
</div>
</div>
</div>
</div>
</td>
<td class='work_area'>
<div id='activity_fields'>
<input type="hidden" name="activity[form_attributes][id]" id="activity_form_attributes_id" />
<ul class='empty_sort_table' id='sortable'>
<li class='blank-slate'>
Build your activity by drag and dropping stimuli and collectors from the palette.
</li>
</ul>
</div>
</td>
</tr>
</table>
I would like to drag the instructional text and drop on the activity builder area and the cypress code for it
it('Activity Builder: Activity Library, Activity & Scheduling', () => {
const dataTransfer = new DataTransfer()
//Activity Scheduling
leftMenuNavigation.clickActivityScheduling()
cy.findByRole('heading', { name: /activities & scheduling/i }).should(
'be.visible'
)
//creating activity
cy.findByText(/^New Activity$/i)
.should('be.visible')
.parent()
.click()
cy.findByText(/activity/i, {
selector: '.goog-menuitem-content'
}).click({ force: true })
cy.findByRole('link', { name: /instructional text/i }).trigger(
'dragstart',
{
dataTransfer
}
)
cy.findByRole('cell', {
name: /build your activity by drag and dropping stimuli and collectors from the palette\.
/i
})
.findByRole('listitem')
.trigger('drop')
.trigger('dragend')
})
})
})