Reac.jsでページ遷移先にAudioオブジェクトを渡したい。

Question

条件分岐などのイベントによるページ遷移で、ページ遷移先にAudioオブジェクトを渡す方法を教えていただけないでしょうか。
下記は動作サンプルです。
サンプル
現状はページの遷移ができない状態です。

ページの遷移はReact Routerを使用しています。
遷移元でAudioオブジェクトを再生し、遷移先でAudioオブジェクトを停止できればよいので、使用するライブラリや方法にこだわりはありません。

該当部分のコード

遷移元

const audio = new Audio();
audio.loop = true;
audio.play();
console.log(audio);
history.push({
  pathname: "/next",
  state: { obj: audio }
});

遷移先

const Next = prop => {
  const audio = prop.location.state.obj;
  const stopSound = () => {
    console.log(audio);
    audio.pause();
  };

  return (
    <button onClick={stopSound}>停止</button>
  );
};

試したこと

渡すオブジェクトをstring型にするとページが遷移し、遷移先にオブジェクトを渡すことができました。

const audio = "audio";
console.log(audio);
history.push({
  pathname: "/next",
  state: { obj: audio }
});

console.log(audio);
history.push({
  pathname: "/next",
  state: { obj: "audio" }
});

そのほかnumberやbooleanも遷移し渡すことができました。
しかし、new Audio()で生成される<audio preload="auto" loop=""></audio>は遷移できず、渡せずでした。