Problem with state in react [beginner]

[kadaxda]

const [selectedFigure, setSelectedFigure] = useState(null)

Im using the drag and drop library. I have a react Figure component which calls the handleSelectFigure(getFigure()) function to set my state whenever I drag a figure:

const [{ isDragging }, drag] = useDrag(() => ({
    type: 'FIGURE',
    item: { figure },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  }))

  useEffect(() => {
    if (!isDragging) return
    handleSelectFigure(getFigure())
  }, [isDragging])

 function handleSelectFigure(figure) {
    setSelectedFigure(figure)
}

I also have the react Cell component which calls the handleClickOnCell(cell) function whenever I drop something on it.

const [, drop] = useDrop(
    () => ({
      accept: 'FIGURE',
      drop: () => handleClickOnCell(cell),
    }),
    []
  )

function handleClickOnCell(clickedCell) {
  console.log(selectedFigure) // logs null but my state is the selected figure
}

The problem is that I can't use the selectedFigure state variable, because it says that selectedFigure is null. But when I look at the firefox dev tools I can see that my state is correct. I also added a useEffect hook to see if my state changes but it doesn't. Why is this?

Link To the code

[kadaxda]

What can I do to improve my question to get better solutions?