How to Handle 429 Too Many Requests Status When Building a Next.js Chatbot with OpenAI

I’m working on creating a chatbot using Next.js and the OpenAI API. Even though I’m following the OpenAI documentation, I keep encountering a 429 (Too Many Requests) error. Below is my code:

......
export default function Home() {
  const [inputValue, setInputValue] = useState('');
  const [chatLog, setChatLog] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    setChatLog((prevChatLog) => [...prevChatLog, { type: 'user', message: inputValue }]);
    sendMessage(inputValue);
    setInputValue('');
  }

  const sendMessage = (message) => {
    const url = "https://api.openai.com/v1/chat/completions";
    const headers = {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${process.env.OPENAI_API_KEY}`
    };

    const data = {
      model: "gpt-4o-mini",
      messages: [{ "role": "user", "content": message }]
    };

    setIsLoading(true);
    axios.post(url, data, { headers }).then((res) => {
      console.log(res);
      setChatLog((prevChatLog) => [...prevChatLog, { type: 'bot', message: res.data.choices[0].message.content }]);
      setIsLoading(false);
    }).catch((err) => {
      setIsLoading(false);
      console.log(err);
    });
  }

  return (
    <>
      <h1>ChatGPT</h1>
      {chatLog.map((message, index) => (
        <div key={index}>
          {message.message}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Type your message..." value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

I suspect the error might be due to the rate limits of the API, but I’m not sure how to resolve it. Has anyone else faced this issue? How can I handle this error or optimize my requests to avoid hitting the rate limits?

And this is the documentation of OpenAI that i follow it