Create an array of object with spread syntax and useState

Hi I am trying to create a very easy array of number using a loop and the spread syntax,
the goal :

    const [numbers, setNumbers] = useState([
        {numberName: 1, key: 1},
        {numberName: 2, key: 2},
        {numberName: 3, key: 3},
        {numberName: 4, key: 4},
    ])

but it dosen’t work, my loop seems to work properly but it dosent assign the value to the array.

const number = props.numberProp

const [numbers, setNumbers] = useState([])

let i = 0;
while(i < number){
    setNumbers(...numbers, {numberName: i, key: i})
    i++      
}

I looked for tutorials and videos but didn’t manage to solve my problem.