mongodb works on localhost, but on heroku error [duplicate]

Question

when my server is running, heroku submits the log in and data is added, but when i disconnect my server I get an error

> POST http://localhost:3001/register net::ERR_CONNECTION_REFUSED
> Uncaught (in promise) TypeError: Failed to fetch
    at handleClick (Register.jsx:12:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
    at invokeGuardedCallback (react-dom.development.js:4270:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4284:1)
    at executeDispatch (react-dom.development.js:9011:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9043:1)
    at processDispatchQueue (react-dom.development.js:9056:1)
    at dispatchEventsForPlugins (react-dom.development.js:9067:1)
    at react-dom.development.js:9258:1

server.js

require('dotenv').config()
const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const mongoose = require('mongoose')

const app = express();
const port = process.env.PORT || 3001


const createUser = require('./registerController');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cors());

app.post('/register', createUser);


mongoose.connect(process.env.REACT_APP_DB_URI, { useNewUrlParser:true, useUnifiedTopology:true })
.then(() => {
app.listen({port}, () => console.log(`Server listening on Port ${process.env.REACT_APP_DB_PORT}`));
});

fetch method

import { useState} from "react";

function Register() {

  const yearNow = new Date().getFullYear();

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const handleClick = async (event) => {
    event.preventDefault();

tried changing the fetch(https://sign-on-page.herokuapp.com/), but same error. tried using 'config var' on heroku, but similar error. pretty sure I'm missing something here with the fetch method, but couldn't find any docs for help.

    let result = await fetch("http://localhost:3001/register", {
      method: "post",
      body: JSON.stringify({ name, email, password }),
      headers: {
        "Content-Type": "application/json",
      },
    });
    result = await result.json();
    console.warn(result);
    if (result) {
      alert("Data saved successfully");
      setName("");
      setEmail("");
      setPassword("");
      window.location.href = "/welcome.html";
      
    }
  };

  return (
    <div className="text-center">
      <main className="form-signin">
        <form action="/" method="post">
          <img className="mb-4" src="man.png" alt="" width="135" height="157" />
          <h1 className="h3 mb-3 fw-normal">Please Register</h1>

          <div className="form-floating">
            <input
              onChange={(e) => {
                setName(e.target.value);
              }}
              autoComplete="off"
              type="name"
              className="form-control"
              id="floatingName"
              placeholder="Your first name"
              value={name}
            />
            <label htmlFor="floatingInput">First name</label>
          </div>
          <div className="form-floating">
            <input
              onChange={(e) => {
                setEmail(e.target.value);
              }}
              autoComplete="off"
              type="email"
              className="form-control"
              id="floatingInput"
              placeholder="[email protected]"
              value={email}
            />
            <label htmlFor="floatingInput">Email address</label>
          </div>
          <div className="form-floating">
            <input
              onChange={(e) => {
                setPassword(e.target.value);
              }}
              autoComplete="off"
              type="password"
              className="form-control"
              id="floatingPassword"
              placeholder="Password"
              value={password}
            />
            <label htmlFor="floatingPassword">Password</label>
          </div>

          <div className="checkbox mb-3"></div>
          <button
            onClick={handleClick}
            className="w-100 btn btn-lg btn-primary"
            type="submit"
          >
            Sign on
          </button>
          <p className="mt-5 mb-3 text-muted">Copyright &copy; {yearNow}</p>
        </form>
      </main>
    </div>
  );

}

export default Register;

Pretty new to this, appreciate any guidance