about useState function on react

Question

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  function increase() {
    setCount(count + 1);
    console.log(count);
  }
  return (
    <div className="container">
      <h1>{count}</h1>
      <button onClick={increase}>
        +
      </button>
    </div>
  );
}

export default App;

i dont understand when console.log(count) show up its always have value of one step before!
for example, when i clicked the button, browser screen rendered '1'
but console.log is '0'
i expected console.log is '1'. Can anyone explain it to me please :0?