process.env.REACT_APP_KEY not working with api calls - reactjs

Question

So far in 2 projects I created a .env file in the root of my project. I install npm install dotenv. I place (e.g.)REACT_APP_KEY='123456' in the env file . In my app.js file I add require("dotenv").config() in my component where I am making the api call i console.log(process.env.REACT_APP_KEY) in the the console I get 123456. So far it looks like its working. But when I place the process.env.REACT_APP_KEY in the api call I get 404 error? What am i missing? If I remove process.env.REACT_APP_KEY and add 123456, I get no error and the call works. Is it because I am using axios to get the data, should i use fetch? I can't seem to find anything that can help me with this. I included my error below.
thank you.
xhr.js:177 GET https://api.unsplash.com/search/photos?query=bali 401
dispatchXhrRequest # xhr.js:177
xhrAdapter # xhr.js:13
dispatchRequest # dispatchRequest.js:52
Promise.then (async)
request # Axios.js:61
Axios.<computed> # Axios.js:76
wrap # bind.js:9
getImages # App.js:12
onSearchSubmit # App.js:20
App # App.js:22
renderWithHooks # react-dom.development.js:14985
mountIndeterminateComponent # react-dom.development.js:17811
beginWork # react-dom.development.js:19049
beginWork$1 # react-dom.development.js:23940
performUnitOfWork # react-dom.development.js:22776
workLoopSync # react-dom.development.js:22707
renderRootSync # react-dom.development.js:22670
performSyncWorkOnRoot # react-dom.development.js:22293
scheduleUpdateOnFiber # react-dom.development.js:21881
updateContainer # react-dom.development.js:25482
(anonymous) # react-dom.development.js:26021
unbatchedUpdates # react-dom.development.js:22431
legacyRenderSubtreeIntoContainer # react-dom.development.js:26020
render # react-dom.development.js:26103
(anonymous) # index.js:7
./src/index.js # index.js:18
__webpack_require__ # bootstrap:856
fn # bootstrap:150
1 # reportWebVitals.js:14
__webpack_require__ # bootstrap:856
checkDeferredModules # bootstrap:45
webpackJsonpCallback # bootstrap:32
(anonymous) # main.chunk.js:1
createError.js:16 Uncaught (in promise) Error: Request failed with status code 401
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:62)