how can I deal with fetch API result withen useState

Question

I just want to know what I have missed here: After setFriend I tried to console log (friend) but I got an empty array, could someone please explain that :)

import React, { useState } from 'react';
import Button from './Button';

const Friend = () => {
    const [friend, setFriend] = useState({})

    async function getFriend() {
        try{
            const response = await fetch('https://www.randomuser.me/api?results=1')
            const result = await response.json()
            await setFriend(result)
            console.log(friend)

        }catch(err){
            console.log(err)
        }

    }

    return (
        <div>
            <Button getFriend={getFriend}/>
        </div>
    );
};

export default Friend;

Answer 1

use useEffect

async function getFriend() {
        try{
            const response = await fetch('https://www.randomuser.me/api?results=1')
            const result = await response.json()
            await setFriend(result)
            console.log(friend)

        }catch(err){
            console.log(err)
        }

    }

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