railsのviewでreact.jsがレンダリングした値をrailsが扱えるように取得したい

Question

### 実現したいこと
railsのviewでreact.jsがレンダリングした値をrailsが扱えるように取得したい。

### 前提
Rails: 8.0.2
react: "19.2.0"
react-dom: "19.2.0"

railsのviewでreactが取得した値を以下のように表示させました。
(Rails)
「app/view/layouts/application.html.erb」

<%= javascript_include_tag "search01", "data-turbo-track": "reload", type: "module" %>
に、search01を指定。

「app/view/search.html.erb」
略
<div id="search01"></div> ①
略
を、記載。

(React)
「app/javascript/search01.jsx」

const root = createRoot(document.getElementById('search01'));
ここに"search01"を記載し  ① に正常に値がレンダリングされるのを確認しました。
※値は、reactが返した単に数値です。

### 今回実現したいこと・発生している問題・エラーメッセージ

やりたいことは、
①でWeb上に表示された値を以下view内のform_withで
controller: search
action: calc01
に送信する。

「app/view/search.html.erb」
略
<div id="search01" ></div>
略
<%= form_with url: search_calc01_path, method: :get do |f| %>
<%= hidden_field_tag :tmp01, nil, {id: :search01} %> ②（この書式自体が？！になっている）
<%= hidden_field_tag :tmp02, "999.999" %> ③（テストとして臨時記載）
<%= f.submit "送信" %>
<% end %>
略

	※　tmp01、tmp02はここだけの名前

### 試したこと・結果

上記、form_withで送信すると、テストで臨時記載してある③は正常に送信されていることは確認しているが、
②は以下ログのように取得できていない。

Parameters: {"tmp01" => "", "tmp02" => "999.999", "commit" => "送信"}

（推測・結論）
（１）②の書式が間違っている？！何かが足りない？！、{id: :search01}でhtml要素は指定出来ない？！
（２）そもそもフロントエンドとバックエンドではデータ送信レイヤーが異なり仕組みが元来ない。
ただ、自環境のreactは、railsと別ポートではなく、railsプロジェクト内で動作してるからなんとかなるのかも？！
とタカをくくっています。

** ※　ご教授宜しくお願い致します！！！**

### 補足情報
次に、
stimulusのcontrollerとして動作させようと思っておりますが既存資産でまず動作させたいです。

どうぞ宜しくお願い致します。

Answer 1

Reactをマウントするdiv#search01をform_withの内側に入れて、そしてReactサイドで<input type="hidden">を生成しましょう。

Comments

[bbTeratail]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
////////////////////////////////////////////////////////
お世話になります。
お早い回答ありがとうございます。
送信出来ました！！！

ご教授頂いた通り、
<div id="search01"></div>
をform_withに移動。

jsxで、
return <div>
<input type="hidden" name="tmp01" id="search01" value={this.state.calc01} autocomplete="off" />
</div>;
としたらいとも簡単に送信が出来ました！！！

これによって止まっていた作業が進みます。
本当にありがとうございます。

基本なんでしょうね・・・もっと精進&勉強します。