Subdomain localhost: Invalid host header - reactjs

Question

I currently have my website at localhost:3000 and i also created a subdomain for the admin panel at admin.localhost:3000. I configured my index.js to render 2 different apps depending on the window.location.host.
Everything was working accordingly then for some reason when i logged out of my admin panel and refreshed admin.localhost:3000 i got the INVALID HOST HEADER.
Here is my index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AppAdmin from './AppAdmin';
import App from './App';
let host = window.location.host;
let protocol = window.location.protocol;
let parts = host.split(".");
if ((parts.length >= 2 && parts[0] !== "admin")) {
let subdomain = parts[0];
parts.splice(0, 1);
window.location = protocol + "//" + parts.join(".") + "/";
}
const parsedData = window.location.host.split(".");
console.log(parsedData)
if(parsedData[0]==='admin'){
ReactDOM.render(<AppAdmin />, document.getElementById('root'));
}else{
ReactDOM.render(<App />, document.getElementById('root'));
}
here is my package.json:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#ashvin27/react-datatable": "^1.5.3",
"#fortawesome/fontawesome-svg-core": "^1.2.19",
"#fortawesome/free-brands-svg-icons": "^5.9.0",
"#fortawesome/free-regular-svg-icons": "^5.9.0",
"#fortawesome/free-solid-svg-icons": "^5.9.0",
"#fortawesome/react-fontawesome": "^0.1.4",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.19.0",
"bootstrap": "^4.6.1",
"classnames": "^2.2.6",
"dotenv": "^16.0.1",
"font-awesome": "^4.7.0",
"http-proxy-middleware": "^2.0.6",
"is-empty": "^1.2.0",
"jquery": "^3.4.1",
"jwt-decode": "^2.2.0",
"popper.js": "^1.15.0",
"prop-types": "^15.7.2",
"ra-data-json-server": "^2.9.3",
"react": "^18.2.0",
"react-admin": "^4.1.3",
"react-app-rewired": "^2.2.1",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"react-scripts": "5.0.1",
"react-toastify": "^5.3.1",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "SET NODE_ENV=production && webpack-dev-server --host 127.0.0.1 --inline --history-api-fallback --content-base . ",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:9000/"
}