ReactでEventに設定するハンドラにreturnを書くときと書かない時の挙動についてご教示いただきたい

前提

Reactで要素をクリックするとイベントを発火するアプリを作成中で
onClick時に渡すイベントハンドラを作成しましたが、イベントハンドラにreturn を書くときと
書かないときの挙動の違いについて理解が追いついていないため
どのような状態になっているかご教示いただけないでしょうか。

サンプルコード、コード全文に記載しているアプリの挙動は以下の通りです。
・div className="drum-pad" をクリックすると、onClick が発火し、audio を実行しています。
・また keyPressHandler イベントで同様に上記のdiv className="drum-pad" をクリックする動作を実現しています。
・クリックイベントハンドラ内でReactのStateを変更しています。

実現したいこと

サンプルコードの onClick イベントハンドラの実装・挙動について理解したい

該当のソースコード

javascript
1import React, { useRef,useState,useCallback,useEffect } from "https://esm.sh/react@18";
2import ReactDOM from "https://esm.sh/react-dom@18";
3
4const App = () => {
5  const [currentSong,setCurrentSong] = useState("song")
6  
7  //click
8  const onClick = (key, song)=> {
9    // const elm = document.getElementById(key)
10    // console.log(elm) // NG : null
11    // if(elm) elm.play()
12    // setCurrentSong("song") Error:画面が真っ白
13    return () => {
14      document.getElementById(key).play();
15      setCurrentSong(song)
16    };
17  }
18  
19  //keyPressEvent
20  const keyPressHandler = useCallback((event) => {
21    const key = event.key.toUpperCase()
22    const padBank = document.getElementById(key)?.closest(".drum-pad")
23    if(padBank) padBank.click()
24  }, []);  
25  useEffect(() => {
26    document.addEventListener("keypress", keyPressHandler, false);
27  }, []);
28  
29  return(
30    <>
31      <div className="inner-container" id="drum-machine">
32        <div className="pad-bank">
33          <div className="drum-pad" onClick={onClick('Q','Heater-1')}>
34            <audio class="clip" id="Q" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"></audio>
35            Q
36          </div>
37        <div className="controls-container">{currentSong}</div>
38      </div>
39    </>  
40  );
41}
42
43ReactDOM.render(<App />,
44document.getElementById("root"))

html
1<div id="root"><div>

CSS
1#root {
2  display:flex;
3  justify-content:center;
4  align-items:center;
5  height: 100vh;
6}
7.inner-container {
8  position:relative;
9  text-align:center;
10  background-color: #b3b3b3;
11  width: 660px;
12  text-align: center;
13}
14.inner-container .pad-bank {
15  display:inline-block;
16  width:332px;
17  height:272px;
18  margin:20px;
19  background-color: #cccccc;
20}
21.inner-container .pad-bank .drum-pad {
22  position:relative;
23  float:left;
24  width:100px;
25  height:80px;
26  margin-right:10px;
27  margin-top:10px;
28  border-radius:5px;
29  cursor:pointer;
30  background-color: #eeeeee;
31  box-sizing:border-box;
32  padding-top:35px;
33}
34.controls-container {
35  width:240px;
36  height:272px;
37  vertical-align:top;
38  display:inline-block;
39  background-color: #eeeeff;
40  margin:20px;
41}

補足情報（全ソースコード）

https://codepen.io/unripe01/pen/abKXoNB

試したこと

意図しない挙動
onClick のスコープに直接 useState の setter を書いたり、
document.getElementByIdを実行。
※コメントアウトしている部分です。

意図した挙動
return を返してその中で setter と document.getElementByIdを実行。

知りたいこと

div className="drum-pad"のonClickに、onClick イベントハンドラを仕掛けたのですが
ハンドラのスコープ内では document.getElementById や setCurrentSong がうまく機能しません。

・なぜ onClick に return を書いて、その中のスコープでは意図した挙動になるのか？
・onClick イベントハンドラに onClickメソッドを仕掛けた場合、return メソッドを定義したものと書かないものとではどういった違いになるのか？
・この挙動を理解するにあたって読むべきドキュメント（おそらくReactではなくDOMの挙動についての学びが足りないと感じています）

上記の疑問について、ご教示いただけますと幸いです。
恐れ入りますがよろしくお願いいたします。