React streaming audio file gets cached – Javascript

I have a function which creates a new file in the back-end but the <PlaySound /> component keeps playing the old sound file and not the updated one. The sound file has the same name/path it just has different content.

I tried having the row.text as the key so it would force the component to update when the description of the file updates. I also tried generating a GUID as seed for the url, and also to use no-cache headers but nothing seems to work…

<PlaySound key={ row.text } path={ row.location.path } filename={ row.location.filename } />

This is the PlaySound component

import React, { Component } from 'react';
    
import { genUID } from '../../../helpers/helperFunctions';
    
class PlaySound extends Component
    {
        playSound(path, filename) {
            var endpoint = "http://0.0.0.0:8001/api/stream"
            var url = endpoint + "?path=" + path + "&filename=" + filename + "&seed=" + genUID()
            var audio = new Audio(url);
            console.log(audio);
            audio.load();
            audio.play();        
        }
    
        render() 
        {
            return (
                <div>
                    <span onClick={() => this.playSound(this.props.path, this.props.filename)}>►</span>
                </div>
            );
        }
    }
    
export default PlaySound

Here is my nodejs/express streaming implementation…

app.get(API_VERSION + '/stream', (req, res) =>
{
  const filepath = req.query.path;
  const filename = req.query.filename;

  const file = '/app/audioExport/' + filepath + filename;

  try
  {
    res.writeHead(200, {
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Pragma': 'no-cache',
      'Content-Type': 'audio/wav',
    });
    const rstream = fs.createReadStream(file);
    rstream.pipe(res);
  } catch (error) {
    res.json({error: error})
  }
});

** Edit ** Found a related question with no answer.
Reload Audio Cache without Refreshing Page JS/NODE.JS