reactで対象のformをボタンではなくjsでsubmitしたい

実現したいこと

対応したいことはreact環境でformをbuttonのデフォルトのsubmitではなく、jsでsubmitさせたいです

発生している問題・分からないこと

idやrefを使用してsubmitさせようとしましたが、どうもうまく動作せず、、
知見がある方にご教授いただきたいです

該当のソースコード

TypeScript

12```ts 3import { useRef } from "react";4import "./styles.css";5 6export default function App() {7 const formRef = useRef<HTMLFormElement>(null);8 return (9 <div className="App">10 <form 11 id="test"12 ref={formRef}13 onSubmit={() => {14 console.log("test");15 }}16 >17 ...etc 18 </form>19 <button 20 onClick={() =>21　　　//パターン１22 (document.getElementById("test") as HTMLFormElement)?.submit()23 //パターン２24 //formRef.current?.submit()25 }26 >27 submit2 28 </button>29 </div>30 );31}32

### 試したこと・調べたこと - [ ] teratailやGoogle等で検索した - [x] ソースコードを自分なりに変更した - [ ] 知人に聞いた - [ ] その他 ##### 上記の詳細・結果 docmentを見つつ自分なりに試した ### 補足 特になし