why the html did not render corrently when using dangerouslySetInnerHTML in react

I have a html text define like this:

const helpContent ="<form name=\"punchout_form\" method=\"post\" action=\"https://openapi.alipaydev.com/gateway.do?charset=UTF-8&method=alipay.trade.page.pay&sign=nKG8mCXQlGKOHezlqu7nM9ZJWskZsYVzWyW4Rm0dS%2BT8A4iWs3A96gwaqcdCwINIYacXQbtErYAM7GNAaqWFTNdl33Xj%2BVbEPqew%2BXO2yoihRU8onV0Omt5eo01PRITGEbclLI5v6VmpBwzbrzMawu63dSXTRWJ2jRga5ZUr1cnvexYQj3NLWH5eQS7ZHXwLhbOFlVOyostdF%2FSd9YJTFNotz25K1eipLI4JdG3%2BtaLLBQsNDahET09KWkxKjALSrZGIT48KLOmKWDMXkXTJzHSxjvOFxYKtBmwRenkRxt1wTWX21LgLH3Bi8k4N1KFNuj4FxrzI%2FJGOa58%2BULO54Q%3D%3D&return_url=http%3A%2F%2Fdomain.com%2FCallBack%2Freturn_url.jsp&notify_url=http%3A%2F%2Fdomain.com%2FCallBack%2Fnotify_url.jsp&version=1.0&app_id=2021000122621126&sign_type=RSA2&timestamp=2023-03-07+02%3A00%3A53&alipay_sdk=alipay-sdk-java-4.35.65.ALL&format=json\">\n<input type=\"hidden\" name=\"biz_content\" value=\"{"extendParams":"dd","outTradeNo":"dd","passbackParams":"ddd","productCode":"productCode","subject":"ddd","sysServiceProviderId":"ddd","totalAmount":"1"}\">\n<input type=\"submit\" value=\"立即支付\" style=\"display:none\" >\n</form>\n<script>document.forms[0].submit();</script>";

then I render this html text in react "react": "^17.0.1" like this:

<div style={{paddingLeft: 15, textIndent: 2}} dangerouslySetInnerHTML={{__html:helpContent1}}></div>

what makes me confusing is that the UI shows nothing, I have tried to define a simple html text like this:

 const helpContent1 ="<span>fwegewgwgwe</span>";

this works fine, why the long text could not be rendered? what should I do to make it work as expect? Am I missing something?

const helpContent ="<form name=\"punchout_form\" method=\"post\" action=\"https://openapi.alipaydev.com/gateway.do?charset=UTF-8&method=alipay.trade.page.pay&sign=nKG8mCXQlGKOHezlqu7nM9ZJWskZsYVzWyW4Rm0dS%2BT8A4iWs3A96gwaqcdCwINIYacXQbtErYAM7GNAaqWFTNdl33Xj%2BVbEPqew%2BXO2yoihRU8onV0Omt5eo01PRITGEbclLI5v6VmpBwzbrzMawu63dSXTRWJ2jRga5ZUr1cnvexYQj3NLWH5eQS7ZHXwLhbOFlVOyostdF%2FSd9YJTFNotz25K1eipLI4JdG3%2BtaLLBQsNDahET09KWkxKjALSrZGIT48KLOmKWDMXkXTJzHSxjvOFxYKtBmwRenkRxt1wTWX21LgLH3Bi8k4N1KFNuj4FxrzI%2FJGOa58%2BULO54Q%3D%3D&return_url=http%3A%2F%2Fdomain.com%2FCallBack%2Freturn_url.jsp&notify_url=http%3A%2F%2Fdomain.com%2FCallBack%2Fnotify_url.jsp&version=1.0&app_id=2021000122621126&sign_type=RSA2&timestamp=2023-03-07+02%3A00%3A53&alipay_sdk=alipay-sdk-java-4.35.65.ALL&format=json\">\n<input type=\"hidden\" name=\"biz_content\" value=\"{"extendParams":"dd","outTradeNo":"dd","passbackParams":"ddd","productCode":"productCode","subject":"ddd","sysServiceProviderId":"ddd","totalAmount":"1"}\">\n<input type=\"submit\" value=\"立即支付\" style=\"display:none\" >\n</form>\n<script>document.forms[0].submit();</script>";

Your inputs have the inline style style="display:none" So your content is rendering, but is being hidden. Remove that line and you will see it.