React js State is null after async web request

Question

I created one Axios instance which fetches some information from the public API.

function SharedSavings() {
    const [savings, setSavings] = useState([]);

    const getDetails = async () => {
        const response = await axios.get("savings/")
        .catch((err) => console.log(err));
        console.log(response)
        setSavings(response.data.sharedData)
        console.log(savings)
    }

    useEffect(() => {
        getDetails()
     }, [])

    return (
        <div className="">
            
        </div>
    )
}

Now, when I do console.log(response), I get an response in a second, but it executes the next statement as well and savings state is returned as null.

I have to call multiple API's so I'm going for async operations. I googled a lot, and found almost everything about class components rather than functional.

I want to get the value of state for next operations to get details from that response and render elements. Any suggestions or help on code or state will be wicked.