Clicking the current audio button doesn’t pause the previous audio that was already being played

import React, { useState, useRef } from 'react';
const PlayAudio = ({ content }) => {
    const [isPlaying, setIsPlaying] = useState(false);
    const [previous, setPrevious] = useState({})
    const audioRef = useRef(null);
    const previousRef = useRef(null);


    const togglePlay = () => {
        previousRef.current = audioRef.current;
        if (!isPlaying) {
            previousRef.current.pause();
            audioRef.current.play();
        } else {
            audioRef.current.pause();
        }
        setIsPlaying(!isPlaying);
    };


    return (
        <div>
            {content.audio && (
                <audio ref={audioRef} src={content.audio}></audio>
            )}
            {content.audio && (
                <img
                    src="play.svg"
                    alt=""
                    onClick={togglePlay}
                    className="cursor-pointer"
                />
            )}
        </div>
    );
};

export default PlayAudio;

Clicking the audioRef doesn’t pause the previous audio that is being played on the website.

I tried doing some tweaks but none of them works! How to achieve that functionality?
Any Idea?