Why is this form file upload not working?

Question

Tried to strip down a file upload to a very simple example and break out all the data with a FileReader and FormData so I know what I'm working with before posting to an endpoint. Still failing to see where this data is going, why it is not available on formData.

import axios from 'axios';


export const MyUploadPerfectAssetForm = () => {

    const onChange = (event: any) => {

        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = (e) => {
            console.log("logging e.target.result" + e.target?.result)
        };

        //shows the files values properly
        reader.readAsText(file);

        console.log("onChange ran!")

        const formData = new FormData;

        formData.append('file', file);

        console.log("logging formData after append " JSON.stringify(formData))



        const uploadFile = async () => await axios.post("https://myvalidapi-api.myplace.com/asset/upload", formData, {
            headers: {
                'content-type': 'multipart/form-data'
            }
        }).then((response) => { console.log("logging response from postFile" + JSON.stringify(response.data)) })

        uploadFile()
    }



    return (
        <div>
            <form >
                <div>
                    <input id="file"
                        name="test"
                        type="file"
                        onChange={onChange}
                    ></input>
                </div>
                <div>
                    <button type="submit">Submit</button></div>
            </form>
        </div >
    );
}