In my React app, I have an API key bound to a variable:

import React, { useState, useEffect } from 'react'
import WeatherCard from './WeatherCard';

export default function Weather() {
  const apiKey = process.env.REACT_APP_API_KEY;  // API KEY BOUND HERE
  const [forecastObj, setForecastObj] = useState({});
  console.log(apiKey) //DID IT BIND SUCCESSFULLY?

  useEffect(() => {
    fetch(`https://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${zipCode}&days=3&aqi=no&alerts=no`)
      .then(reply => reply.json())
      .then(
        json => {
          setForecastObj(json);
          setisLoading(false);
        })
  }, [apiKey])

// Setting "days" to the array containing daily forecasts
  const days = forecastObj.forecast.forecastday;
  
  return (
    <div className="container">
      {days.map((day, index) => {
        return(
          <WeatherCard
          key={index}
          day={day} 
          />
          )
        })}
    </div>
  )
}

Running npm start locally returns the API key in the console, and properly displays the app in-browser.

This is for a class, and my instructor is insisting the GitHub repo secret is all that's needed for the key to be used by my code. I've set up both an Environment secret and repo secret containing the key (one after the other when the first didn't work, I can't remember which I tried first).

When I start a build Action in GitHub to deploy to Firebase it'll complete successfully, and the page/app can be accessed, but will show a blank screen with an undefined return in console (from the console.log(apiKey); line), along with the error:

Uncaught TypeError: r.forecast is undefined  Weather.jsx:39:15
    u Weather.jsx:39
    React 8
    S scheduler.production.min.js:13
    T scheduler.production.min.js:14
    813 scheduler.production.min.js:14
    Webpack 12

Mozilla's dev console also provides the error: GET https://api.weatherapi.com/v1/forecast.json?key=undefined&q=97232&days=3&aqi=no&alerts=no

This tells me that the API key isn't being used, but when my instructor used the same setup (React app hosted to Firebase, secret in repo secrets) to render an app version label using the code:

Version: {process.env.REACT_APP_VERSION}

...it shows up.

So far I've tried setting up Firebase functions to hold the key, but half of the resources I found on the subject (I went down a bit of a rabbit hole) don't seem to apply to a simple React app.

So what am I doing wrong?