Invalid API Key provided Stripe

I am integrating Stripe with my React Vite app but when I am making payment I am getting
{type: ‘invalid_request_error’, message: ‘Invalid API Key provided: “pk_test****************…*********************************************sB”;’} error I setting the stripe publisher key in my env file but why I am getting this type of error please help to to resolve this issue.

import CheckoutInformation from "../../components/root/checkout/CheckoutInformation";
import OrderSummary from "../../components/root/checkout/OrderSummary";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";

const stripePromise = loadStripe(`${import.meta.env.VITE_STRIPE_PUBLIC_KEY}`);

const StripeProvider = ({ children }: { children: React.ReactNode }) => {
  return <Elements stripe={stripePromise}>{children}</Elements>;
};

const Checkout = () => {
  return (
    <StripeProvider>
      <div className="container py-4 my-8 flex lg:flex-row flex-col gap-8">
        <div className="flex-1">
          <CheckoutInformation />
        </div>
        <div className="lg:w-[500px] w-full">
          <OrderSummary />
        </div>
      </div>
    </StripeProvider>
  );
};

export default Checkout;

const stripe = useStripe();
  const elements = useElements();
  
   const paymentHandler = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    try {
      const paymentData = {
        amount: 10,
        currency: currencyCode,
      };
      const { data } = await axiosInstance.post(
        "/payment/process",
        paymentData
      );
      console.log(data);

      const client_secret = data.client_secret;
      const cardElement = elements?.getElement(CardNumberElement);
      if (!cardElement) {
        // Handle case where card element is not available
        console.error("Card element is not available");
        return;
      }
      const result = await stripe?.confirmCardPayment(client_secret, {
        payment_method: {
          card: cardElement,
    
        },
      });

      if (result?.error) {
        // Show error to your customer
        console.error(result?.error);
        toast.error(result?.error?.message as string);
      } else {
        console.log(result);

        // Payment successful
        console.log("Payment succeeded:", result.paymentIntent);
      }

      // const { data} = await axiosInstance.post("/payment/process")
    } catch (error) {
      let message;

      if (error instanceof AxiosError) {
        message = handleApiError(error);
      } else {
        message = "An unexpected error occurred.";
      }

      toast.error(message);
    }
  };