setupProxy.js in Create React App not working - reactjs

Question

Hello I am trying to get a dynamic proxy going in react and express. I do not want to configure the proxy in the package.json because I need it to be dynamic. I have tried the following using setupProxy.js by the CRA documentation. Here is my code
TypeError: Cannot read property 'split' of null
[1] at required (/Users/chadlew/Desktop/SC.CRM.React/client/node_modules/requires-port/index.js:13:23)
[1] at Object.common.setupOutgoing (/Users/chadlew/Desktop/SC.CRM.React/client/node_modules/http-proxy/lib/http-proxy/common.js:101:7)
[1] at Array.stream (/Users/chadlew/Desktop/SC.CRM.React/client/node_modules/http-proxy/lib/http-proxy/passes/web-incoming.js:127:14)
[1] at ProxyServer.<anonymous> (/Users/chadlew/Desktop/SC.CRM.React/client/node_modules/http-proxy/lib/http-proxy/index.js:81:21)
[1] at HttpProxyMiddleware.middleware (/Users/chadlew/Desktop/SC.CRM.React/client/node_modules/http-proxy-middleware/dist/http-proxy-middleware.js:22:32)
This is the error I'm getting everytime.
And here is my code: setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api', // You can pass in an array too eg. ['/api', '/another/path']
createProxyMiddleware({
target: process.env.REACT_APP_PROXY_HOST,
changeOrigin: true,
})
);
};
Here is the React:
import React, { useState, useEffect } from 'react'
import GoogleLogin from 'react-google-login';
const Login = ({history}) => {
const [authData, setAuthData] = useState({});
useEffect(() => {
if(Object.keys(authData).length > 0) {
(async () => {
const res = await fetch("/api/auth/login", {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(authData)
});
// This data would be set into app level state (react-context api) and be accessible everywhere
const { message, isAuth, userData } = await res.json();
})();
}
}, [authData, history])
const successHandler = data => {
setAuthData(data);
history.push("/home");
}
const failureHandler = (data) => setAuthData(data);
return (
<div className = "login-page">
<h1 style = {{marginBottom: '1rem'}}>Welcome</h1>
<GoogleLogin
clientId = {process.env.REACT_APP_GOOGLE_CLIENT_ID}
buttonText = "Login with Google"
onSuccess = {successHandler}
onFailure = {failureHandler}
cookiePolicy = {'single_host_origin'}
/>
</div>
)
}
export default Login;
Whenever I login with google I get the error message and the proxy ultimately does not work. Any suggestions would be highly appreciated