Target specific element of react-grid-layout onDrag

Question

I'm trying to add/remove the class on the grid items of the grid layout that I'm dragging but it affects all the elements instead of the one I drag on and I don't know how to avoid that. Here is my code:

  const [isActive, setIsActive] = useState(false);

  const handleDrag = () => {
    setIsActive(true);
  };

  const handleDrop = () => {
    setIsActive(false);
  };

 return (
      <ResponsiveReactGridLayout
        layouts={layouts}
        className="layout"
        onLayoutChange={handleLayoutChange}
        draggableHandle=".drag-handle"
        onDrag={handleDrag}
        onDragStop={handleDrop}
      >
        {widgets.map(widget => (
          <Box key={widget.id} data-grid={widget.layout}>
            <DragIndicatorIcon className="drag-handle" />
            <widget.component {...(widget.componentProps || {})} className={isActive ? 'tilt-grid' : ''}/>
          </Box>
        ))}
      </ResponsiveReactGridLayout>
  );