I need some help, I dont know if you have ever used stripe but I am trying to use their element component but when it renders there is no styling whatsoever do you have any idea why shouldn't stripe elements already have default styling

here is the code if u wanna take a quick look and I sent an image to see how it renders

"use client";
//all other imports
import '@stripe/stripe-js'; 



const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);

interface PaymentProps {
  orderType: string;
  totalPrice: number;
  setTotalPrice: (price: number) => void;
  changePage: (page: string) => void;
}

function Payment(props: PaymentProps) {
  const [cart, setCart] = useState<Array<SelectedMenuCardType>>([]);
  useEffect(() => {
    setCart(store.get("cart"));
  }, []);



  return (
    <div >
        <Elements stripe={stripePromise} >
              <CheckoutForm
                changePage={props.changePage}
                amount={props.totalPrice}
              />
        </Elements>
</div>