2번 클릭해야 axios.delete 반응하는 이유

안녕하세요 제로초님 제가 출력 된 것들을 삭제 하는 함수를 만들고 있습니다. 

제가 category 값을 map 함수로 출력 해 준 뒤 

li value값에 category id 값을 넣어 주었습니다.

값을 제어 할려고 -> useState(categoryId) 만들어 주었습니다.

li 태그 onClick 를 하면 ContentDelete 라는 삭제하는 함수가 호출 됩니다.

그리고 e.target.value 을 이용해서 -> categoryId 에 value 값을 넣어주었습니다.

그리고 categoryId 값을 서버에 호출 해 주었습니다.

하지만 Delete li 태그 onClick 를 2번 해야 axios.delete 가 먹힙니다.

DELETE http://localhost:3065/api/category/0 404 (Not Found) -> 한 번 클릭 할 경우 useState 초기값인 0이 나옵니다.

DELETE http://localhost:3065/api/category/18 404 (Not Found) -> 한 번 더 클릭해야 18이 나오고 404 에러가 나지만 삭제는 됩니다.

왜 이러는 지 모르겠습니다... async await 으로 비동기 처리도 제대로 해 주고 return 문에다가 넣어주었는데 왜 처음 클릭하면 state 초기값인 0이 찍히는 지...

const [categoryId, setCategoryId] = useState<number>(0);
 
const ContentDelete = useCallback( async (e) => {
setCategoryId(e.target.value);
return await axios.delete(`http://localhost:3065/api/category/${categoryId}`, {
withCredentials: true,
})
}, [categoryId])
 
  return (
<ul>
{categorys && categorys.map((test: { id: any, content: React.ReactChild }) => (
<li key={test.id} value={test.id} onClick={ContentDelete}>{test.content}
<AiOutlineClose />
</li>
))}
</ul>
 )

인프런 커뮤니티 질문&답변