UseState is not updating value in first attempt?

Question

I am running the following snippet. On first time I Click on the onClick button it should show "Hi, I am ammad jahangir" it shows ammad. I want to know the reason.

import logo from './logo.svg';
import './App.css';

import { useState } from 'react';
function App() {

  let [data,setdata]=useState("ammad")

  function apple()
  {
    setdata("Hi, I am ammad jahangir")
    alert(data)
  }
  console.warn(data)
  return (
    <div className="App">
      <h1>{data}</h1>
  
      <button onClick={apple}>Click me</button>
    </div>
  );
}

export default App;

I was trying the outcome should come like "Hi, I am ammad jahangir" in first onClick but it appears ammad on first click.