React proxy, the server responded with a status of 404 (Not Found)

By default I am running at localhost: 3000. I want to send a request to localhost: 8072 with the proxy setting. I've done proxy settings and I'm getting an error.

In addition terminal shows an erorr

npm ERR! type: 'system', npm ERR! errno: 'ECONNREFUSED', npm ERR! code: 'ECONNREFUSED', npm ERR! parent: 'process-manager' npm ERR! npm ERR! If you are behind a proxy, please make sure that the npm ERR! 'proxy' config is set properly. See: 'npm help config' FetchError: request to http://localhost:8072/ failed, reason: connect ECONNREFUSED 127.0.0.1:8072

I put my code below.

In addition, I see such an error in the terminal.

package.json

`

{
  "name": "process-manager",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.2.2",
    "axios": "^0.21.0",
    "http-proxy-middleware": "^1.0.6",
    "proxy": "http://localhost:8072",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "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"
    ]
  }
}

`

src/setupProxy.js

`

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8072',
      changeOrigin: true,
    })
  );
};

`

Login.js

`

import React, { useState } from 'react';
import querystring from 'querystring';
import axios from 'axios';
import classes from './LoginPage.module.css';
import { useHistory } from "react-router-dom";

const LoginPage = (props) => {
  const [emailState, setEmailState] = useState();
  const [passwordState, setPasswordState] = useState();
  const history = useHistory();

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const response = await axios.post(
        // 'http://localhost:8072/oauth/token',
        'api/oauth/token',
        querystring.stringify({
          username: emailState,
          password: passwordState,
          grant_type: 'password',
          provider: 'default'
        }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Basic ZGV2Z2xhbi1jbGllbnQ6ZGV2Z2xhbi1zZWNyZXQ='
          }
        }
      )
      console.log(response.data);
    } catch (error) {
      return alert(error);
    }

    history.push('/');
  };

  return (
    <div className={classes['login-page']} >
      <form onSubmit={handleSubmit}>
        <h1 className={classes['login-header']} >Login</h1>
        <div className="classes.block">
          <label>
            Email:
          </label>
          <input type="email"
            name="email"
            required
            className={classes['classes-inputs']}
            onChange={e => setEmailState(e.target.value)} />
        </div>
        <div className={classes.block}>
          <label>
            Password:
          </label>
          <input type="password"
            name="password"
            autoComplete="on"
            required
            className={classes['classes-inputs']}
            onChange={e => setPasswordState(e.target.value)} />
        </div>
        <div className={classes.block}>
          <input type="submit" value="Login" onSubmit={handleSubmit} />
        </div>
      </form>
    </div>
  )
}

export default LoginPage;

`

Where am I doing wrong? Can you help me?