InvalidStateError Peer connection is closed

[unit-002]

I am having this error when I hangup the media stream if I don't use

document.location.reload(true);

but currently I use history.push('/') when I cancel the stream to route to the home page. Though stream gets stopped or cancelled but I get this error.

Uncaught (in promise) DOMException: Peer connection is closed

I am using the same hangup code to cancel the stream except the document.location.reload(true);

async function hangUp(e) {
  const tracks = document.querySelector('#localVideo').srcObject.getTracks();
  tracks.forEach(track => {
    track.stop();
  });

  if (remoteStream) {
    remoteStream.getTracks().forEach(track => track.stop());
  }

  if (peerConnection) {
    peerConnection.close();
  }

  document.querySelector('#localVideo').srcObject = null;
  document.querySelector('#remoteVideo').srcObject = null;

  history.push('/');
}

How do I properly cancel the stream and route to another page without getting this error?

I am using this for my ReactJS project and the browser I'm currently using is firefox.