Javascript Drag and drop children without triggering dragstart for parent

I have HTML like this

<details draggable="true" open="">
<summary>author</summary>
<div draggable="true">name</div>
<div draggable="true">company</div>
</details>

I want seperate “dragstart” event listeners for the divs and a third for the containing block when i start my cursor on summary.

Currently div.addEventListener("dragstart", (event) => {}) also fires the event for the parent when the child divs are dragged. I did try event.stopPropagation but that makes the drop stop working when i drop onto a rich text field (the dataTransfer data doesn’t transfer).