I can't rerender the array immediately when my array changes

Question

//this array update from onClick callback on button tag.
const [arrayLang, setArrayLang] = useState([]);

// this is element that i'll push
// this is update from onChange callback on select tag.
const [lang, setLang] = useState();

<div>
    <div>
        <h4>개발 언어</h4>
        {arrayLang.map((value, index)=>(
            <h5 key={index}>{value}</h5>
        ))}
    </div>
</div>
.
.
. 
<select 
    onChange={(value)=> {
    setLang(value.target.value);
                    
    setLang((lang)=>{
        console.log(lang);

        return lang
        })
    }}
>
.
.
.
</select>
<button onClick={()=>{
    let copiedLang = arrayLang;
    copiedLang.push(lang);
                    
    setArrayLang(copiedLang);

    setArrayLang((arrayLang) => {
        console.log(arrayLang);

        return arrayLang;
        })
    }}>추가</button>

the title is the content.

I checked the change about arrays, the array is changed immediately, but the rendering side doesn't. however, when I push the new element to the array, it renders the array that before I pushed.

e.g)

rendered array: (empty)

actual array : [1]

//if i push 2 to array

rendered array: 1

actual array: [1,2]

how do I render immediately when it changes?

++ simple summary about my page

i think the array has not problem with asynchronous. what can i do?