イベントハンドリングの謎 - 最初の要素だけリンクが機能しない

ReactでSPAを書いているのだが、一つだけハマってまだ抜け出せないバグが。あるコンポーネントの最初のボタン・リンク要素だけイベントハンドリングが上手く行かず、クリックしても何も起こらないと言う事象が発生している。コードのイメージはこんな感じ。

import xxx

function AAA() {

  --省略--

  const clickHandlerA = () => {
    console.log('Clicked Button-A');
  };


  return (
    <div className='newPortfolio'>
      <div className='newPortfolioContainer'>

          #このボタンだけクリックイベントがハンドリングできず、clickHandlerAが動かない
        <div className='dummyButton'>
          <button type="button" className='createButton' id="button-A" onClick={clickHandlerA} >
            Button
          </button>
        </div>        

  　--省略--

        <div className='portfolioContainer'>
        {tickers.map((ticker,index)=>(

            <div className="tickerContainer" key={ticker.id} id={ticker.id}>
              <div className="inputPortfolio">
                <div>Ticker</div>
                <input type="text" placeholder='Ticker' value={ticker.ticker} onChange={(e) => onEditTicker(ticker, "ticker", e.target.value)}/>
                  {/* プルダウン表示 */}
                  {inputText.length > 0 && (
                    <div className="ticker-dropdown">
                      {filterTickers(inputText).map(suggestion => (
                        <div key={suggestion} onClick={() => handleSuggestionClick(ticker, suggestion)} className="ticker-dropdown-item">
                        {suggestion}
                        </div>
                      ))}
                    </div>
                  )}
              </div>
              <div className="inputPortfolio">
                <div>Unit</div>
                  <input type="text" placeholder='Unit/Unit Ratio'  value={ticker.ratio} onChange={(e) => onEditTicker(ticker, "ratio", e.target.value)}/>
              </div>
            </div>
          
          ))}
        </div>

         #このボタンは正常にクリックイベントがハンドリングできている
        <div className="addTickerButton">
          <button type="button" className='createButton' id="addTickerButton" onClick={addTicker}>
            <FontAwesomeIcon icon={faSquarePlus} /> Add A Ticker
          </button>
        </div>

　 </div>


         #このボタンも正常にクリックイベントがハンドリングできている
      <div className="createPortfolioAction">
        <button type="button" className='createPortfolioButton'  id="createPortfolioButton" onClick={newPortfolio}>
          Create A New Portfolio
        </button>
      </div>
    </div>
  )
}

export default AAA

エラーコードも吐かれないので原因が調べにくいのだがこう言うのはどうやってアプローチするべきなんだろうか。