I set state(id) on button click and i want to use that data(id) in that state, it just showing undefined in the first click

[State Initialization] const [id,setId] = useState("");

[Onclick of Button]

`render: (record) => (
                <div>
                    <Button
                        className="details-btn-approve"
                        onClick={()=>{
                                handleApprove(record)
                        }}
                    >
                        Approve
                    </Button>
)`

[useEffect and calling on click action]

`

useEffect(()=>{
    },[id]);
    const handleApprove = async (record) => {
        setId(record.ID);
        console.log(id);
}

`

i was expecting the id to be changing every time i click button

here is the complete Code `

import {useEffect, useState} from "react";
import {Button, Card, Input, Modal, Table} from "antd";
import axios from "axios";
import {endPoints} from "./ApiEndPoints";

function Approval() {
    const [isLoading, setIsLoading] = useState(false);
    const [dataSource, setDataSource] = useState([]);
    const [searchedText,setSearchedText] = useState("");

    const [id,setId] = useState("");

    useEffect(()=>{
        ViewUnApproved();
    },[setDataSource])

    const ViewUnApproved = async () =>{
        setIsLoading(true);
        const {data: response} = await axios.get(
            endPoints.pendingApprovalAsset
        );
        if (response["status"] === 100){
            setIsLoading(false)
            setDataSource(response["pending_approval"]);
        } else if(response["status"] === 104){
            console.log('no data