typescriptで動的に作成されたidに対して処理を行いたい

前提・実現したいこと

Rails上でtypescrpitを使っており、tsxファイルのコンポーネントにてinput要素に動的にidを設定しているのですが
知識が浅く動的なidに対して再度処理をしようとした際に詰まってしまいました。

まずは最低限イベントが発火するところまでいきたく、動作確認しているのですが
最初からhtmlに定義しているidだとjsで取得でき、動的に作成されたidは取得できないという状況です。

動的とはいえ処理したいid名は固定されているので処理できそうに思えたのですが上手くいかず
おそらく私のPropsやDOMContentLoadedの理解が足りていないのだと思います。

最終的にはこの動的なidのinputになんらかの値が入力されたら
他のinput要素を必須入力にしない(require falseを動的につける)というのものを書きたいです。
（とりあえず動かないとなんともできないので、動作確認用にclickイベントでalertをつけています）

ご教示お願いいたします。

ソースコード

html
1= form_with hoge do |f|
2  = f.text_field :book  // id: hoge_book

components
1const Hoge: FC<Props> = (props) -> {
2  return (
3　　<React.Fragment>
4  　  {props.books.map((book) => (
5     　 <input
6       　 id={`hoge_${book.name}`} // id動的 動的だがパターンが決まっており hoge_testbook に対して処理したい
7  　      ...
8      />
9    　))}
10　  </React.Fragment>
11  )
12}
13
14document.addEventListener('DOMContentLoaded', () => {
15  $('#hoge_book').on('click', () => {
16    alert('てすと'); // 発火する
17  });
18  $('#hoge_testbook').on('click', () => {
19    alert('てすと'); // 発火しない
20  });
21});