I have come across some strange behaviour in a component I am making.

I have some inputs that I map out and a onchange which passes the value to the parent component. I then add this data to an array depending on what data is sent.

I have setArray which is my state but it doesn't appear to get set?

    const [array, setArray]= useState([])

    function onChange(e, __typename, valid, value){
    console.log(e, __typename, valid, value) // this returns mobile 01882828 true 0 if i am in the mobile input
        const newSelectedArray = array;
        if(array.includes(__typename)){
            newSelectedArray.push({
                ...value,
                __typename: __typename,
                data: e,
                isValid: valid
              });
            setArray(newSelectedArray)
        }else{
            array[value] = {
                ...value,
                __typename: __typename,
                data: e, 
                isValid: valid
            }
            setArray(array)
        }
    //console.log(array) this works and logs my array
    }


    useEffect(() => {
        console.log(array); //this does not log my array
      }, [array])

My return

...
<OnboardingContent sections={sections} sendToRegister={onChange}/>
<button onClick={() => console.log(array)}>Log</button> //This logs the array as well
<button onClick={() => setArray(array)}>State</button> //This does nothing
...

example console.log output

[
    {
        "__typename": "mobile",
        "data": "01882828",
        "isValid": true
    },
    {
        "__typename": "firstname",
        "data": "Hello",
        "isValid": false
    }
]

If someone could tell me why none of this is working