Because this is how tools like React work. The environment variables are injected into the code during build.
The getApiKey.js you have provided a screenshot of (note: code in text form is much better than screenshots of code when you are asking for assistance) is simply returning the API to wherever it was called from. Instead it should make the call to the API endpoint utilising this key and return the data to the front end.
See [Support Guide] How do I keep my API keys/tokens safe using Netlify Functions?
This is nothing to do with being on a free plan.