How can I remove class from a item after the cursor leaves the item in React DND?

Question

Problem I am dragging a item from a box and dropping that into a box. When dragging an item and hovering over another item, I add a class to the hovered item but when it leaves the item, I want to remove that class from that item. Can anyone please tell me how can I achieve that? I am using doing this in hover function from useDrop hook in react-dnd.

const dropRef = useRef(null);
const [{ isOver, canDrop }, drop] = useDrop(() => ({
accept: "element",
hover(monitor) {
  const currentItem = dropRef.current;
  currentItem.classList.add = 'beforeClass'
},
drop: (item, monitor) => {
  setPageElements((prev) => {
    return [...prev, item.element];
  });
},
collect: (monitor) => ({
  canDrop: monitor.canDrop(),
  isOver: monitor.isOver(),
}),  

})); 

drop(dropRef);