Ok, here's a closure issue (i think) that I'm dealing with. Can't wrap my head around it. I have a component and I'm trying to get the updated value of shouldDropAbove into my callback onStepItemDrop:

export const StepItem = () => {
  const [shouldDropAbove, setShouldDropAbove] = React.useState<boolean>()

  React.useEffect(() => {
    console.log(shouldDropAbove) //outputs updated value correctly
  }, [shouldDropAbove])

  console.log(shouldDropAbove) //also is outputting the updated value correctly

  const onStepItemDrop = (draggingStep) => {
    console.log(shouldDropAbove) //outputting undefined ?????
  }

  return (
    <Droppable
      onDrop={onStepItemDrop}
      setShouldDropAbove={setShouldDropAbove} //Droppable updates setShouldDropAbove correctly
    >
      {jsx stuff}
    </Droppable>
  )
}

export const Droppable = ({onDrop, setShouldDropAbove}) => {
  //updating setShouldDropAbove
}

What is going on here and why can't I get the correct value in the callback?