vercelにデプロイしたReactのアプリでAPIからデータを取得できない

Question

Reactのアプリケーションをvercelにデプロイしたのですが、開発環境ではAPIから取得できているデータを本番環境では取得できません。

原因として考えたものとしては、
APIから取得する際にapi keyを設定する必要があり、開発環境では.envに記載しているものの、本番環境ではそれが読み込ませず、データを取得できていない
と言うものがあります。

また、開発環境のapi keyは.envファイルから、以下のように取得し、

const api_key = process.env.REACT_APP_API_KEY;

以下のようにfetchしています。

fetch(url, {
  headers: {
    "X-API-KEY": `${api_key}`
  }
})
.then(res => {

})

vercelのダッシュボードから環境変数をセットはしてみたものの、process.envで使おうとしてもうまく使えません。reactの場合、vercelの環境変数はどのように使えばいいのでしょうか？