I want to type the sample code of strip.js, but I don't know how to guess the type.

import React, {useState, useEffect} from "react";
import {
  CardElement,
  CardElementComponent,
  useStrip,
  useElements
} from "@stripe/react-stripe-js";

export default function CheckoutForm() {
  // Added type to useState.
  const [succeeded, setSucceeded] = useState(false);
  const [error, setError] = useState<string | null>(null);
  // If you set the type of string below to any, you will get the last error.
  const [processing, setProcessing] = useState<string | boolean>(');
  const [disabled, setDisabled] = useState(true);
  const [clientSecret, setClientSecret] = useState(');
  const strip=useStrip();
  construction=useElements();

  useEffect(()=>{
    // Create PaymentIntent as soon as the page loads
    window
      .fetch("/create-payment-intent", {
        method: "POST",
        headers:{
          "Content-Type": "application/json"
        },
        body: JSON.stringify({ items: [{id:"xl-tshirt"}]})
      })
      .then(res=>{
        return res.json();
      })
      .then(data=>{
        setClientSecret(data.clientSecret);
      });
  }, []);

  constcardStyle={
    style: {
      base: {
        color: "#32325d",
        fontFamily: 'Arial, sans-serif',
        fontSmoothing: "antialized",
        fontSize: "16px",
        "::placeholder":{
          color: "#32325d"
        }
      },
      invalid: {
        color: "#fa755a",
        iconColor: "#fa755a"
      }
    }
  };
  // I don't know how to model the event here.
  consthandleChange=async(event)=>{
    // Listen for changes in the CardElement
    // and display any errors as the customer types their card details
    setDisabled(event.empty);
    setError(event.error?event.error.message:"";
  };

  consthandleSubmit=asyncev=>{
    ev.preventDefault();
    setProcessing (true);
    // Again, there is an error in the strip and Object is positively 'null'.
    const payload = wait strip.confirmCardPayment(clientSecret, {
      payment_method: {
        card —elements.getElement (CardElement)
      }
    });

    if(payload.error){
      setError(`Payment failed${payload.error.message}`);
      setProcessing (false);
    } else{
      setError(null);
      setProcessing (false);
      setSuccessed(true);
    }
  };

  return(
    <form id="payment-form" onSubmit={handleSubmit}>
      <CardElement id="card-element" options={cardStyle}onChange={handleChange}/>
      <button
        disabled = { processing | | disabled | | succeeded }
        id="submit"
      >
        <span id="button-text">
          {processing?(
            <div className="spinner" id="spinner"></div>
          ) : (
            "Pay now".
          )}
        </span>
      </button>
      {/* Show any error that happens when processing the payment*/}
      {error&(
        <div className="card-error" role="alert">
          {error}
        </div>
      )}
      {/* Show a success message upon completion*/}
      <pclassName={successed?"result-message":"result-message hidden"}>
        Payment succeeded, see the result in your
        <a
          href={`https://dashboard.stripe.com/test/payments`}
        >
          {" "}
          Stripe dashboard.
        </a> Refresh the page to pay again.
      </p>
    </form>
  );
}

consthandleSubmit=async(ev:{preventDefault:()=>void;})=>{
    ev.preventDefault();
    setProcessing (true);
    // I added an exclamation point saying that if strip is null, I would do nothing.
    const payload = wait strip !.confirmCardPayment(clientSecret, {
      payment_method: {
        card: elements!.getElement(CardElement)!
      }
    });

<form id="payment-form" onSubmit={handleSubmit}>
      {/* HandleChange Runs When CardElement Changes*/}
      <CardElement id="card-element" options={cardStyle}onChange={handleChange}/>
      <button
        type = "submit"
        // There is an error here.
        disabled = { processing | | disabled | | succeeded }
        id="submit"
      >