How do I get access to the Draggable data once it is over a Droppable?

[alchermd]

Copying the example from the documentation quick start:

import React from 'react';
import {useDroppable} from '@dnd-kit/core';

function Droppable(props) {
  const {isOver, setNodeRef} = useDroppable({
    id: 'droppable',
  });
  const style = {
    color: isOver ? 'green' : undefined,
  };

  return (
    <div ref={setNodeRef} style={style}>
      {props.children}
    </div>
  );
}

How do I conditionally style the droppable depending on the draggable's data?

function Droppable(props) {
  // ...
  const supportedTypes = ["foo", "bar"];
  const style = {
    color: isOver ? 'green' : undefined,
  };

  const draggableCurrentlyOver = ???;

  if (supportedTypes.includes(draggableCurrentlyOver.data.type)) {
    style.color = "red" 
  }

  // ...
}

[alchermd]

Solved: Not found in the docs but active is also exposed by the useDroppable hook.