【React】 setStateを即時反映させたい

以下のコードのようなことを実現したいです。

意図した挙動

ボタン1をクリック→Nが1に変更される（なにも出力しない）
ボタン2をクリック→Nが1に変更され、1秒後にN=1を出力

現状の問題

ボタン2をクリックしたとき、N=0が出力される

ソースコード

jsx

1// import './App.css';2import { useEffect, useState } from 'react';3function App() {4 5 const [n,setN]=useState(0);6 7 const onClickBtn1=()=>{8 console.log("btn1");9 setN(1)10 }11 12 const AnotherFunction=()=>{13 console.log(n)14 }15 16 const onClickBtn2=()=>{17 console.log("btn2");18 setN(1)19 setTimeout(()=>{20 AnotherFunction()21 },1000)22 }23 24 return (25 <div className="App">26 <div className='btn' onClick={onClickBtn1}>btn1</div>27 <div className='btn' onClick={onClickBtn2}>btn2</div>28 </div>29 );30}31 32export default App;

useEffectについて

ネットでuseEffectを用いてNの値を監視する方針を見かけましたが、今回の場合それをすると「ボタン1を押したときは変更はされるが何も出力しない」という仕様を満たさないため、困ってます。