How to prevent triggering of onClick upon dragging and OnStart upon clicking when using react-draggable library in react app?

import Draggable from 'react-draggable'
const [open, setOpen] = useState(false)
const [dragging, setDragging] = useState(false)

const toggleOpen = (e) => {
   if(!dragging){
      setOpen(!open);
   }
}
const handleStart = (e) => {
   setDragging(true)
}
const handleStop = (e) => {
   setTimeout(function(){setDragging(false)},500);
}
<Draggable onDragStart={handleStart} onDragEnd={handleEnd}>
   open ?
      <SomeComponent>
      :
      null
   <Launcher onClick={toggleOpen} />
</Draggable>

upon clicking the Launcher component onDragStart and onDragEnd events are getting triggered and vice versa. I tried all combinations of e.preventDefault() and e.stopPropagation() and return false in all function calls but did not work. Someway i need to keep these events separate, user should be able to click Launcher component and SomeComponent should appear. Also user should be able to drag Launcher but when finished dragging SomeComponent should not appear.