What's the best way to fetch audio url and then save it in redux-store?

Question

Is there a best practice to store mp3 audio files in redux store? Let's say I have multiple audio urls that I would like to make network calls for and dispatch the ready audio files to the redux-store, so then I could use it anytime I wont (without worrying for network issues).

The way I got it now:

1. On the first page (dashboard) I'm mapping through audios array to get the urls of each object and using it inside of Promise.all, then creating new audio files based on each response and dispatching it to the redux-store. Once that's completed I'm navigating user to the next page.
2. On the next page the user is able to play sounds (with use-sound npm package) using previously called urls.

Couldn't find the right solution for it and I'm wondering if the approach taken by me is right. Also, not able to see codesanbox's network tab to check whether all of the urls have been processed before the next page is loaded.

Here's the example of what I got: https://codesandbox.io/s/react-redux-toolkit-application-forked-pn5nj2?file=/src/pages/SoundPage.js

Also if you prefer to look at the code, here it is:

dashboard page

import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";
import { addSounds } from "../slices/sounds";

const DashboardPage = () => {
  const history = useHistory();
  const dispatch = useDispatch();

  const audios = [
    {
      sound: "pop",
      url:
        "http://codeskulptor-demos.commondatastorage.googleapis.com/pang/pop.mp3"
    },
    {
      sound: "arrow",
      url:
        "http://codeskulptor-demos.commondatastorage.googleapis.com/pang/arrow.mp3"
    },
    {
      sound: "explosion",
      url:
        "http://commondatastorage.googleapis.com/codeskulptor-assets/sounddogs/explosion.mp3"
    }
  ];

  const handleClick = () => {
    const audioUrls = audios.map((audio) => audio.url);

    Promise.all(audioUrls)
      .then((values) => {
        const audioFile = values.map((value) => new Audio(value));
        const audioFileSrc = audioFile.map((audio) => audio.src);
        dispatch(addSounds(audioFileSrc));
        history.push("/sounds");
      })
      .catch((error) => console.log(error));
  };

  return (
    <section>
      <h1>Dashboard</h1>
      <button onClick={handleClick}>Sound system</button>
    </section>
  );
};

export default DashboardPage;

and the soundPage

const SoundPage = () => {
  const [soundIndex, setSoundIndex] = useState(0);
  const sounds = useSelector((state) => state.sounds.sounds);

  const [playSound] = useSound(sounds[soundIndex], {
    autoplay: false,
    interrupt: true,
    html5: true
  });

  return (
    <section>
      <button onClick={() => playSound()}>Play Sound</button>
      <button onClick={() => setSoundIndex(soundIndex + 1)}>increment</button>
      <button onClick={() => setSoundIndex(soundIndex - 1)}>decrement</button>
    </section>
  );
};

export default SoundPage;