usestate 값 update 문제

안녕하세요
프로젝트 하다가 문제가 생겨서 문의드립니다.

const [productList, setProductList] = useState<INodeState[]>([])

const onAddProduct = () => {
    setProductList((prev) => [
        ...prev,
        {
          id: newKey,
          state: (
            <ProductRow
              key={newKey}
              setValue={setProductValue}
              onPrdDelete={() => onDeleteProduct(newKey)}
            />
          )
        }
      ])

console.log(productList)
}

const onDeleteProduct = (prdkey: number) => {
setProductList((prev) => prev.filter((obj) => obj.id !== prdkey))
console.log(productList)
}


useEffect(() => {
    console.log(productList)
  }, [productList])


---------------------

onAddProduct 에서 productList 추가시킨 걸 onDeleteProduct 에서 삭제하는 건데
콘손로그로 찍어보면 useEffect안에서는 제대로 삽입되고 삭제되는데
onAddProduct나 onDeleteProduct 에서는 하나가 덜 나옵니다. 화면에서도 하나가 덜 나와요.
productList 처음 추가하면 useEffect 콘솔로그에서는 하나가 바로 나오는데 []으로 나오고
두 개를 추가해야 하나가 삽입되는 식 한 번이 늦게 삽입됩니다.

왜 바로 업데이트가 안되는 걸까요?
화면에서도 바로 업데이트 되게 하려면 어떻게 해야할까요??