I am not able to use STRIPE key in react app with .env

Question

ROOT: package.js .env MY_KEY= "pk_test_*********************" pages Stripe.js

Stripe.js

import { useSelector } from "react-redux";
import styled from "styled-components";
import StripeCheckout from 'react-stripe-checkout';
import { useState } from "react";

const KEY = process.env.MY_KEY;

const Container = styled.div``;
const Wrapper = styled.div`
  padding: 20px;
  ${mobile({ padding: "10px" })}
`;

const Cart = () => {
  const cart = useSelector(state => state.cart)
  const [stripeToken, setStripeToken] = useState(null)

  const onToken = (token) => {
    setStripeToken(token)
  }
  console.log(stripeToken)
  return (
    <Container>
            <StripeCheckout
              stripeKey= {KEY}
            >
              <Button>CHECKOUT NOW</Button>
            </StripeCheckout>
    </Container>
  );
};

export default Cart;

But when i put stipe key direct in stripekey props it works.

But here i have to use the .env to protect my key

how to use the .env in nested file stucture in react app

I am expecting that i put my secret key in .env and i could access that key with its variable in another nested react component file