Can't fetch API | OpenAI | Page 1

#

Hello, I want to do a quick fetch of the openai chat API, but it doesn't work
I tried to ask the chat to design the code and help me debug, but it doesn't work

#

import React, { useState } from 'react';

function App() {
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState('');

  const handleChange = (event) => {
    setMessage(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    const data = {
      prompt: message,
      apiKey: 'YOUR_API_KEY',
    };

    fetch('https://api.openai.com/v1/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
      .then((response) => response.json())
      .then((data) => {
        setResponse(data.choices[0].text);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Message:
        <input type="text" value={message} onChange={handleChange} />
      </label>
      <button type="submit">Send</button>
      <p>Response: {response}</p>
    </form>
  );
}

#

#

well well well

#Can't fetch API