s3 업로드시 useState에 담긴 파일을 사용하면 400에러가 옵니다

등록하기 버튼을 눌렀을때 s3에 이미지를 저장하는 코드를 만들고있는데 강의와 같이 e.target.files[0]를 담은 변수를 바로 사용할 수 있는 경우에는 이상없이 업로드가 잘 됩니다.

그런데 똑같은 코드를 등록하기 버튼이 눌렀을때 실행 되야하는 함수에 넣고 useState에 담겨진 똑같은 파일을 사용하면 에러코드 400이 옵니다.

handleImageUpload()
```
const [updateFile, setUpdateFile] = useState<File | null>(); 
const [updateFileName, setUpdateFileName] = useState("");
</pre>
<pre>const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files !== null) {
const file = e.target.files[0];
setUpdateFileName(file.name);
setUpdateFile(file);</pre>
<pre>const fileName = encodeURIComponent(file.name);
const res = await fetch(`/api/post/image?file=${fileName}`)
.then((res) => {
return res.json();
})
.then((res) => {
console.log(res);
return res;
});</pre>
<pre>// const presignedUrl = await getS3PresignedURL(file.name);</pre>
<pre>//S3 업로드
const formData = new FormData();
Object.entries({ ...res.fields, file }).forEach(([key, value]) => {
formData.append(key, String(value));
});
let 업로드결과 = await fetch(res.url, {
method: "POST",
body: formData,
});
console.log(업로드결과);</pre>
<pre>```
getS3PresignedURL() 함수의 인자도 마찬가지로 file.name을 넣고 업로드를하면 잘 되는데 updateFileName를 넣으면 업로드가 되지 않습니다.

postApi()
```
</pre>
<pre>const postApi = async () => {
try {
if (updateFile) {
</pre>
<pre>const fileName = encodeURIComponent(updateFileName);
const res = await fetch(`/api/post/image?file=${fileName}`)
.then((res) => {
return res.json();
})
.then((res) => {
console.log(res);
return res;
});</pre>
<pre>//S3 업로드
const formData = new FormData();
Object.entries({ ...res.fields, updateFile }).forEach(([key, value]) => {
formData.append(key, String(value));
});
let 업로드결과 = await fetch(res.url, {
method: "POST",
body: formData,
});
console.log(업로드결과);
```
조건문으로 updateFile이 있을때 실행되게 했습니다.

그리고 getS3PresignedURL()에 updateFileName을 넣어도 file.name으로 직접 넣어줘도 Presigned URL은 잘 오는것으로 확인했습니다.

도와주십시요 센세 ㅠㅠ