React-beautiful-dnd: Typescript drop animation: error on isDragging property

[o-faro]

Thanks for this awesome library!
I am working on a drop animation, following your manual. Using typescript I get this error:

Type '{ children: Element; style: DraggingStyle | NotDraggingStyle | { backgroundColor: string; transform: string; transition: string; } | { backgroundColor: string; transform: string; transition: string; ... 8 more ...; zIndex: number | ... 6 more ... | undefined; } | undefined; 'data-react-beautiful-dnd-draggable': stri...' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ children: Element; style: DraggingStyle | NotDraggingStyle | { backgroundColor: string; transform: string; transition: string; } | { backgroundColor: string; transform: string; transition: string; ... 8 more ...; zIndex: number | ... 6 more ... | undefined; } | undefined; 'data-react-beautiful-dnd-draggable': stri...' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
    Property 'isDragging' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.

How Do I type/do this correctly?

            <Draggable
              key={...}
              draggableId={...}
              index={...}
            >
              {(provided, snapshot) => {
                return (
                  <div
                    {...className}
                    isDragging={snapshot.isDragging && !snapshot.isDropAnimating} //error
                    ref={provided.innerRef}
                    {...provided!.draggableProps}
                    {...provided!.dragHandleProps}
                    style={getStyle(provided.draggableProps.style, snapshot)}
                  >
                    {content}
                  </div>
                );
              }}
            </Draggable>

I tried some approaches, but I am experiencing diffent issues here, which I described already on stackoverflow, but didn't get any satisfiying feedback so far.
https://stackoverflow.com/questions/58338770/typescript-extending-properties-of-div-element-fails-on-react-ref/58338900?noredirect=1#comment103034472_58338900

[alexreardon]

You are attempting to add the attribute isDragging to div. That is not a supported attribute for HTMLElement. You could use something like data-is-dragging.

[o-faro]

Haha - the most simple solution! Thank you, working as expected now :)

[a2441918]

@Smaug333 Could you post your solution here please?

[o-faro]

shure:

<div isDragging={snapshot.isDragging && !snapshot.isDropAnimating} ... >//error
<div data-isDragging={snapshot.isDragging && !snapshot.isDropAnimating} ...>

because "isDragging" is not a known attribute for a div element, this is where typescript stumbled upon. So just prefix it with "data-"