title: JS code works when i paste it on console, but does not work inside my React App
body: <p>Okay so, there is that code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var iyziInit = {
    currency: "TRY",
    token: "23bfa27a-172a-493d-b42f-8b091589eaa0",
    price: 2.4,
    locale: "tr",
    baseUrl: "https://sandbox-api.iyzipay.com",
    merchantGatewayBaseUrl: "https://sandbox-merchantgw.iyzipay.com",
    registerCardEnabled: true,
    bkmEnabled: true,
    bankTransferEnabled: false,
    bankTransferRedirectUrl: "https://localhost:3000/callback",
    bankTransferCustomUIProps: {},
    campaignEnabled: false,
    creditCardEnabled: true,
    bankTransferAccounts: [],
    userCards: [],
    fundEnabled: true,
    memberCheckoutOtpData: {},
    force3Ds: false,
    isSandbox: true,
    storeNewCardEnabled: true,
    paymentWithNewCardEnabled: true,
    enabledApmTypes: ["SOFORT", "IDEAL", "QIWI", "GIROPAY"],
    payWithIyzicoUsed: false,
    payWithIyzicoEnabled: true,
    payWithIyzicoCustomUI: {},
    buyerName: "John",
    buyerSurname: "Doe",
    merchantInfo: "",
    cancelUrl: "",
    buyerProtectionEnabled: false,
    hide3DS: false,
    gsmNumber: "",
    email: "email@email.com",
    checkConsumerDetail: {},
    subscriptionPaymentEnabled: false,
    ucsEnabled: false,
    fingerprintEnabled: false,
    payWithIyzicoFirstTab: false,
    metadata: {},
    createTag: function() {
      var iyziJSTag = document.createElement("script");
      iyziJSTag.setAttribute(
        "src",
        "https://sandbox-static.iyzipay.com/checkoutform/v2/bundle.js?v=1634688058781"
      );
      document.head.appendChild(iyziJSTag);
    },
  };
  iyziInit.createTag();</code></pre>
  </div>
  </div>
  </p>
  <p>This code, creates a whole payment form inside <code>&lt;div id=&quot;iyzipay-checkout-form&quot;&gt;&lt;/div&gt;</code>.</p>
  <p>I can't just have it as normal react code, because it is coming from the api of payment gateway provider. This script needs to run and directly add those elements to the dom.</p>
  <p><strong>Here is the problem:</strong></p>
  <p>If I paste this code into the console of the browser, it runs, adds script tags to head of document, which then creates my form inside of the div. And I can see the form.</p>
  <p>However, if I put this code inside my react app, it runs, adds the script tags to head of the document, then nothing happens. The form is not created, my div with id of &quot;iyzipay-checkout-form&quot; is empty.</p>
  <p>Why? I'm losing my mind, can't figure this out for 2 days.</p>
  <p>Should mention this too: If I create a standalone index.html, put this code in script tag on head of the document, and then just add a div with id of &quot;iyzipay-checkout-form&quot;, this does create the form on that html page. So that code only doesn't work inside react.</p>
  <p>You can test this on React Playground: <a href="https://codesandbox.io/s/react-playground-forked-4ht85" rel="nofollow noreferrer">https://codesandbox.io/s/react-playground-forked-4ht85</a></p>
  <p>On the page you see, you won't see the form even tho there's the code to create it, but if you open the console of the playground, and paste the same &quot;that code&quot; i've given on top of this question, the form will appear. You can right click inspect too, to see the head tag and the stuff created inside it.</p>