role does not exist in openAI and can't find message error in Next.js

Question

I have created a project in nextjs which is clone of chatgpt so I used openai api key but it's throwing errors in some objects and messages as I'm unable to use some of the latest openai import functions.I need to solve this error.Following are the 2 files of route.ts and page.tsx.error in role, in page.tsx is that Object literal may only specify known properties, and 'role' does not exist in type 'OpenAI' and in same in messages error is that Cannot find name 'message'. Did you mean 'messages'?ts(2552) page.tsx(122, 26): 'messages' is declared here.

//route.ts code

import { auth } from "@clerk/nextjs";
import { error } from "console";
import { NextResponse } from "next/server";
import OpenAI from 'openai';


const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
  });

export async function POST(
    req: Request
) {
    try{
      const { userId } = auth();
      const body = await req.json();
      const { messages } = body;

      if (!userId) {
         return new NextResponse("Unauthorized",{ status: 401 });
      }

     

      if(!messages) {
        return new NextResponse("Messages are required",{status:400});
      }

      const response = await openai.chat.completions.create({
        model: "gpt-3.5-turbo",
        messages});
        
return NextResponse.json(response.choices[0].message);

    }catch{error}{
        console.log("[CONVERSATION_ERROR]",error);
        return new NextResponse("Internal error",{status:500});
    }
}

//page.tsx code


"use client";

import * as z from "zod";
import axios from "axios";
import { Heading } from "@/components/heading";
import { MessageSquare } from "lucide-react";
import { useForm } from "react-hook-form";
import { formSchema } from "./constants";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
import { useState } from "react";
import ChatCompletionRequestMessage from "openai";
import OpenAI from "openai";
import  ChatCompletionMessageParam   from "openai";






const ConversationPage = () => {
  const router = useRouter();
  const [messages, setMessages] =  useState<ChatCompletionMessageParam[]>([]);


  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      prompt: ""
    }
  });

  const isLoading = form.formState.isSubmitting;

  const onSubmit  = async(values: z.infer<typeof formSchema>) =>  {
    try{
        const userMessage:ChatCompletionMessageParam = { 
          role: "user",
          content: values.prompt,


        };
        const newMessages = [...messages, userMessage];

        const response = await axios.post("/api/conversation", {messages: newMessages});

        setMessages((current) => [...current,userMessage,response.data]);

        form.reset();

    }catch(error:any){
      //TODO: OPEN PRO MODAL
      console.log(error);
    }finally {
      router.refresh();

    }
  };

  return (
    <div>
      <Heading
        title="Conversation"
        description="our most advanced conversation model."
        icon={MessageSquare}
        iconColor="text-violet-500"
        bgColor="bg-violet-500/10"



      />
      <div className="px-4 lg:px-8">
        <div>
          <Form {...form}>
            <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="
            rounded-lg
            border
            w-full
            p-4
            px-3
            md:px-6
            focus-within:shadow-sm
            grid
            grid-cols-12
            gap-2"
            
            >
              <FormField
              name="prompt"
              render={({ field }) => (
                <FormItem className="col-span-12 lg:col-span-10">
                  <FormControl className="m-0 p-0">
                    <Input 
                    className="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                    disabled={isLoading}
                    placeholder="How do calculate radisu of circle?"
                    {...field}
                    />

                  </FormControl>

                </FormItem>
              )}
              />
              
              <Button className="col-span-12 lg:col-span-2 w-full " disabled={isLoading}>
                Generate
              </Button>

            </form>

          </Form>

        </div>
        <div className="space-y-4 mt-4">
         <div className="flex flex-col-reverse gap-y-4">
          {messages.map((messages) => (
            <div key={message.content}>
              {messages.content}
            </div>
          ))}

         </div>

        </div>

      </div>
    </div>

  )
}

export default ConversationPage;

To solve and remove the error using openai latest documentaion functions.