按钮在第二次单击而不是 Reactjs 中的第一次单击时工作

Question

I am i working on Reactjs/nextjs and right now in my page video with audio button,i want two things

1) I want "by default" there should be "bi bi-volume-mute" class in button instead of "bi bi-volume-down"
2) whenever i click on unmute ( after mute) then its not working with one click but if i click on second time then its working , in other words should be "mute or unmute" with single click

Here is my current code

function handleAudio() { 
    if (ref.current.paused) { 
        setMuted(false); 
        ref.current.play(); 
    } else { 
        setMuted(true); 
        ref.current.pause(); 
    }
}

    <buton onClick={handleAudio} className="customAudioPlayerButton">
            {!muted ? (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="30"
                height="30"
                fill="currentColor"
                className="bi bi-volume-down"
                viewBox="0 0 16 16"
              >
                <path d="M9 4a.5.5 0 0 0-.812-.39L5.825 5.5H3.5A.5.5 0 0 0 3 6v4a.5.5 0 0 0 .5.5h2.325l2.363 1.89A.5.5 0 0 0 9 12V4zM6.312 6.39 8 5.04v5.92L6.312 9.61A.5.5 0 0 0 6 9.5H4v-3h2a.5.5 0 0 0 .312-.11zM12.025 8a4.486 4.486 0 0 1-1.318 3.182L10 10.475A3.489 3.489 0 0 0 11.025 8 3.49 3.49 0 0 0 10 5.525l.707-.707A4.486 4.486 0 0 1 12.025 8z" />
              </svg>
            ) : (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="30"
                height="30"
                fill="currentColor"
                className="bi bi-volume-mute"
                viewBox="0 0 16 16"
              >
                <path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96V5.04zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z" />
              </svg>
            )}
          </buton>

Answer 1

can you please try this function.

function handleAudio() { 
   if (muted) { 
     setMuted(false); 
     ref.current.play(); 
   } else { 
     setMuted(true); 
     ref.current.pause(); 
   } 
}