Prompt and Response for API call from Promise in React not matching up

Question

(Beginner, sorry for potential bad format of question)

I'm trying to return a list of prompts to an API and the responses and then display them on a Front-End. I'm using the following function to get from the API:

function getAPI(input) {

input.prompt = prompted


let fetchedData = fetch("https://api.openai.com/v1/engines/text-curie-001/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${APIKEY}`,
  },
  body: JSON.stringify(input),
 }).then(response => 
  response.json().then(data => ({
      data: data,
      status: response.status
  })
).then(res => {
setResponsed(res.data.choices[0].text)
console.log(prompted + responsed)

Where input in an object and prompted coming from a hook in my code. I'm trying to get the prompts and responses to match up, but no matter where I call things, the first response is blank and then it's always backlogged. It occasionally won't change when I change the prompt.

Here's the JSX portion:

return (
<div>



<label>Enter Submission in form</label>
<input type="text" onChange={(e) => setPrompted(e.target.value)}></input>
<label>Submit</label>
<button onClick={(e) => {
getAPI(tobePassedIn)

  }}>Get Stuff</button>

<label>Responses</label>
<li>
</li>
</div>

);

Any thoughts would be greatly appreciated! Also, please let me know if any further clarity is needed