usestate 관련해서 질문드립니다.

안녕하세요 useState 공부하면서 궁금한 부분이 있어 질문드립니다.
useState가 나중에 처리되어 콘솔이 찍히는것이 하나씩 밀리는 현상에 대해 강의시간에 배웠는데요
추가적으로 더 궁금하여 공부하면서 의문점이 생겨 질문드립니다.

아래와 같은 코드에서
useState를 사용해  isPlay를 false로 초기화 시키고

button을 클릭하면 isPlayVideo 함수가 실행되고

그 안에서 setIsPlay를 통해 false이면 true로 true이면 false로 변환시키도록 하였습니다.

또한 state를 변환 후 if 문을 타고 들어가게 되어 isPlay가 true이면 'true입니다'를 출력하고

isPlay가 false이면 'false입니다'를 출력하도록 하였습니다.

제가 예상했던 결과는

isPlay의 초기값이  false이고 버튼을 클릭하면 isPlayVideo함수가 실행되어

setIsPlay에 의해  true로 변환되고 변환 된 후 if문을 타게 되면 'true입니다'가 출력되고
버튼의 내부 텍스트는 '정지'로 변할 것을 예상하였습니다.

하지만 콘솔 창을 보면 'false입니다.'가 출력되네요....

setState함수가 비동기 처리가 되어 if문을 타기전에 true/false 변환된것이 반영이 안되는 것인가요?

그렇다면 제가 원하던 것처럼 구현하기 위해 setState함수를 실행 후 'true입니다'를 출력할 수 있는 방법이 있을까요?
------------------------아래는 예시 코드 ---------------------------------------------

function App() {
  const [isPlay, setIsPlay] = useState(false)

  const isPlayVideo = () => {
    setIsPlay(!isPlay)
    if (isPlay) {
      console.log('true입니다.')
    } else {
      console.log('false입니다.')
    }

  return (
    <div className="App">
      {
          isPlay===true ? <button onClick={isPlayVideo}>정지</button> : <button onClick={isPlayVideo}>재생</button>
        }
  </div>