Clarifai - Getting 400 error when running face-detection

When I put in a URL and run the API call, I get a 400 error specifically pointing out the fetch() function. I am unsure what I am doing wrong or if my code is wrong. My current code:

import { useState } from 'react'
import './App.css'
import FaceRecognition from './components/FaceRecognition'
import ImageLinkForm from './components/ImageLinkForm'
import Logo from './components/Logo'
import Navigation from './components/Navigation'
import Rank from './components/Rank'
function App() {
const [imageInput, setImageInput] = useState('');
const [imageURL, setImageURL] = useState('');
const returnClarifyRequestOptions = (imageURL) => {
const PAT = '123456778956332';
const USER_ID = 'username';
const APP_ID = 'appname';
const IMAGE_URL = imageURL;
const raw = JSON.stringify({
"user_app_id": {
"user_id": USER_ID,
"app_id": APP_ID
},
"inputs": [
{
"data": {
"image": {
"url": IMAGE_URL
}
}
}
]
});
const requestOptions = {
method: 'POST',
mode: 'no-cors',
headers: {
'Accept': 'application/json',
'Authorization': 'Key ' + PAT
},
body: raw
};
return requestOptions;
}
const handleChange = (event) => {
setImageInput(event.target.value);
}
const onButtonSubmit = () => {
setImageURL(imageInput);
fetch("https://api.clarifai.com/v2/models/" + 'face-detection' + "/outputs", returnClarifyRequestOptions(imageInput))
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
return (
<>
<Navigation />
<Logo />
<Rank />
<ImageLinkForm
handleChange={handleChange}
onButtonSubmit={onButtonSubmit}
/>
<FaceRecognition imageUrl={imageURL} />
</>
)
}
export default App

I have tried changing my PAT, my App ID, and changing the setting on my clarifai app but I have not had any luck on figuring out the issue at hand. I also tried hard coding some URL value to see if it works, but I am not sure what to change.