Stripe Invalid API Key provided: undefined with express node.js

I am struggled with Stripe payment api. When I click the button after filled data and card number, It goes to the paymentSuccess page, but there are errors on the console. It said that Invalid API Key provided: undefined

Also, when I checked the stripe dashboard It said that no payment method.

Stripe suggest me to make payment method , but on my code there is payment method. I don't know what is the problem.

This is my code

import React from 'react';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';

//make the card elements 
const stripePromise = loadStripe(`${process.env.PUBLISHABLE_KEY}`);
console.log(stripePromise);
const CheckoutFormWrap = ({ children }) => {
  return (
    <div>
      <Elements stripe={stripePromise}>{children}</Elements>
    </div>
  );
};

CheckoutForm.js 
import React, { useState } from 'react';
import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
import BillingDetailsFields from './BillingDetailForm';
import axios from 'axios';
import styled from 'styled-components';

const CheckoutForm = ({ price, onSuccessfulCheckout }) => {
  const [isProcessing, setProcessingTo] = useState(false);
  const [checkoutError, setCheckoutError] = useState();

  const stripe = useStripe();
  const elements = useElements();

  const handleCardDetailsChange = ev => {
    ev.error ? setCheckoutError(ev.error.message) : setCheckoutError();
  };
  const handleFormSubmit = async e => {
    e.preventDefault();
    const billingDetails = {
      name: e.target.name.value,
      email: e.target.email.value,
      };

    setProcessingTo(true);
    const cardElement = elements.getElement(CardElement);

 
    const { data: clientSecret } = await axios.post("http://localhost:5000/pay",
      {amount: price}
    );
    console.log(clientSecret);

    const paymentMethodReq =  await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: billingDetails,
    });
    
    const confirmCardPayment = await stripe.confirmCardPayment(clientSecret,{
      payment_method: paymentMethodReq.paymentMethod,
    })
    onSuccessfulCheckout();
    console.log(confirmCardPayment);
    if (paymentMethodReq.error) {
      setCheckoutError(paymentMethodReq.error.message);
      setProcessingTo(false);
      return;
    }


  };
  return (
    <form  onSubmit={handleFormSubmit}>
      <div>
        <CheckoutTitle>Pay with</CheckoutTitle>
        <BillingDetailsFields />
      </div>
      <div>
        <CardElementContainer>
          <CardElement
            onChange={handleCardDetailsChange}
          />
        </CardElementContainer>
      </div>
      <div>
        <PayBtn disabled={isProcessing || !stripe}>
          {isProcessing ? 'Processing...' : `Confirm and Pay`}
        </PayBtn>
      </div>
    </form>
  );
};
export default CheckoutForm;

server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const path = require('path');
if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const stripe = require('stripe')(process.env.SECRET_KEY);

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors());

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, 'client/build')));

  app.get('*', function (req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
}
app.listen(port, error => {
  if (error) throw error;
  console.log('server running on port' + port);
});

app.post('/pay', async (req, res) => {
  if (req.method === 'POST') {
    try {
      const { amount } = req.body;
      const paymentIntent = await stripe.paymentIntents.create({
        amount,
        currency: 'usd',
        payment_method_types: ['card_present'],
      });
      res.status(200).send(paymentIntent.client_secret);
    } catch (err) {
      res.status(500).json({ statusCode: 500, message: err.message });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
});

Any ideas?