I'm trying to upload files to S3, but am getting this error (I edited the name of the bucket). When putting in a try/catch block, I can see the error is "access denied."

mockServiceWorker.js:130 Uncaught (in promise) TypeError: Failed to fetch
    at mockServiceWorker.js:130:72
    at handleRequest (mockServiceWorker.js:135:7)
index.js:1227 
 POST https://name-of-bucket.s3-us-west-1.amazonaws.com/ net::ERR_ABORTED 400 (Bad Request)
localhost/:1 Uncaught (in promise) 
Response {type: 'cors', url: 'https://name-of-bucket.s3-us-west-1.amazonaws.com/', redirected: false, status: 400, ok: false, …}
body: (...)
bodyUsed: false
headers: Headers
[[Prototype]]: Headers
ok: false
redirected: false
status: 400
statusText: "Bad Request"
type: "cors"
url: "https://name-of-bucket.s3-us-west-1.amazonaws.com/"
[[Prototype]]: Response

This is the code I'm using.

import React, { useRef, useState } from 'react'
import { useDispatch } from 'react-redux'
import { nanoid } from '@reduxjs/toolkit'
import { postAdded } from './PostsSlice'
import S3 from 'react-aws-s3'

export function AddPostForm() {

//Removed

    const ReactS3Client = new S3(config)
    ReactS3Client.uploadFile(file, newFileName).then((data) => {
      console.log(data)
      if (data.status === 204) {
        console.log('success')
      } else {
        console.log('fail')
      }
    })
  //Removed rest of code
}

This is the CORS policy I'm using for S3. Does anyone know what I could be doing wrong? Does this have to do with CORS, or is it an issue with S3, or is there a syntax error? I checked that the bucket name is correct and the region.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "HEAD",
            "GET",
            "POST"
        ],
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "ExposeHeaders": []
    }
]