Problems Integrating PAYPAL to my NextJS Web Project

[fallow niche]

components/api/checkout/route.tsx

import paypal from "@paypal/checkout-server-sdk"
import { NextResponse } from "next/server"
const clientId = "---"
const clientSecret = "---"

const environment = new paypal.core.SandboxEnvironment(clientId, clientSecret)
const client = new paypal.core.PayPalHttpClient(environment)

export async function POST() {
    const request = new paypal.orders.OrdersCreateRequest();

    request.requestBody({
        intent: "CAPTURE",
        purchase_units: [
            {
                amount: {
                    currency_code: "USD",
                    value: "10.00",
                    breakdown: {
                        item_total: {
                            currency_code: "USD",
                            value: "10.00"
                        },
                        shipping_discount: {
                            currency_code: "USD",
                            value: "0.00"
                        },
                        discount: {
                            currency_code: "USD",
                            value: "0.00"
                        },
                        tax_total: {
                            currency_code: "USD",
                            value: "0.00"
                        },
                        shipping: {
                            currency_code: "USD",
                            value: "0.00"
                        },
                        handling: {
                            currency_code: "USD",
                            value: "0.00"
                        },
                        insurance: {
                            currency_code: "USD",
                            value: "0.00"
                        },
                    }
                },```

components/api/checkout/route.tsx part 2

                items: [
                    {
                        name: "Book of NextJS",
                        category: "PHYSICAL_GOODS",
                        description: "Book XD",
                        quantity: "1",
                        unit_amount: {
                            currency_code: "USD",
                            value: "5.00",
                        },
                    },
                    {
                        name: "Book of NextJS",
                        category: "PHYSICAL_GOODS",
                        description: "Book XD",
                        quantity: "1",
                        unit_amount: {
                            currency_code: "USD",
                            value: "5.00",
                        },
                    },
                ],
            },
        ],
    });

    const response = await client.execute(request);
    console.log(response);

    return NextResponse.json({
        id: response.result.id
    });
}```

components/Cart.tsx

"use client";
import { useAppSelector } from "@/Redux/hooks";
import { RxCross1 } from "react-icons/rx";
import CartProduct from "./CartProduct";
import { useEffect, useState } from "react";
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js"


const Cart = ({ setShowCart }: any) => {
    
    const products = useAppSelector((state) => state.cartReducer);

    const getTotal = () => {
        let total = 0;
        products.forEach((item) => (total = total + item.price * item.quantity));
        return total;
    };

    return (
        <div className="bg-[#0000007d] w-[1380px] min-h-screen fixed left-0 top-0 overflow-y-scroll cart-container">
            <div className="max-w-[400px] w-full min-h-full bg-white absolute right-0 top-0 p-6">
                <RxCross1
                className="absolute  right-0 top-0 m-6 text-[24px] cursor-pointer"
                onClick={() => setShowCart(false)}
                />
                <h3 className="pt-6 text-lg font-medium text-gray-600 uppercase">
                    Tu Carrito
                </h3>

                <div className="mt-6 space-y-2">
                    {products?.map((item: any) => (
                        <CartProduct 
                        key={item.id}
                        id={item.id}
                        img={item.img}
                        name={item.name}
                        price={item.price}
                        quantity={item.quantity}/>
                    ))}
                </div>

                <div className="flex justify-between items-center font-medium text-x1 py-4">
                    <p>Total:</p>
                    <p>${getTotal()}.00</p>
                </div>```

components/Cart.tsx part 2

<button className="bg-black text-white text-center w-full rounded-2x1 py-2 hover:bg-accent mb-4 mt-4">
                    Ver Más
                </button>
                <PayPalScriptProvider options={{clientId: "---"}}>
                    <PayPalButtons
                    style={{
                        color: "blue", 
                        layout: "horizontal",
                    }} 
                    createOrder={async () => { 
                        const res = await fetch('/api/checkout', {
                            method: "POST"
                        })
                        const order = await res.json()
                        console.log(order)
                        return order.id
                    }} />
                </PayPalScriptProvider>
            </div>
        </div>
    )

}

export default Cart;```