Getting 401 error when using gpt-4 model from frontend

I used the gpt api to call it from frontend (React) and it works fine with 3.5 model but it gives unauthorized api key error when using gpt-4 model.
error on using gpt-4 model:
{
“error”: {
“message”: “You didn’t provide an API key. You need to provide your API key in an Authorization header using Bearer auth (i.e. Authorization: Bearer YOUR_KEY), or as the password field (with blank username) if you’re accessing the API from your browser and are prompted for a username and password. You can obtain an API key from https://platform.openai.com/account/api-keys.”,
“type”: “invalid_request_error”,
“param”: null,
“code”: null
}
}

code:` const systemMessage = {
“role”: “system”, “content”: prompt,
}
const apiRequestBody = {
“model”: “gpt-3.5-turbo-16k”,
“messages”: [
systemMessage,

                    ],
                    temperature: 1,
                    max_tokens: 256,
                    top_p: 1,
                    frequency_penalty: 0,
                    presence_penalty: 0,
                }
                await fetch("https://api.openai.com/v1/chat/completions",
                    {
                        method: "POST",
                        headers: {
                            "Authorization": `Bearer ${API_KEY}`,
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify(apiRequestBody)
                    }).then((data) => {
                        return data.json();
                    }).then((data) => {
                        let textVal = data.choices[0].message.content;

                        paragraphs = textVal.split('\n\n');
                        var time = new Date().toLocaleString();
                        console.log(time)
                        regenerateParagraph(paragraphs, textVal)
                    });`