why isn’t setState working even after using async await function [duplicate]

I’m trying to set images after uploading them to cloud, but seems like i’m missing something .
The output is not as desired . I expect the output to be having all the three array elements.
But it is just 0 instead.

import React, { Fragment, useState } from "react";

const App = () => {
  const [image, setimages] = useState([]);
  var array = ["a", "b", "c"];

  const upload = async () => {
    for (let i = 0; i < 3; i++) {
      setimages((pre) => [...pre, array[i]]);
    }
  };

  const onClick = async () => {
    await upload();
    const myForm = {
      formImages: image,
    };
    console.log("Form details", myForm);
  };

  return (
    <>
      <div className="container">
        <button
          type="button"
          onClick={onClick}
        >
          Click me
        </button>
      </div>
    </>
  );
};

export default App;

Desired Ouput is

Form details {formImages: Array(3)}

But the actual output is

Form details {formImages: Array(0)}
            

How to actually wait until everthing gets filled ,because when i click the button again, the array is actually filled with a,b,c . I want this to happen in the first iteration