PayFast Integration to React signature error

Question

Hello I am trying to integrate PayFast to my ReactJS project but I am getting this error

signature : Generated signature does not match submitted signature

I do not understand because based on the docs https://developers.payfast.co.za/docs#step_2_signature we are to generate an Md5 hash then submit it through with the entire form

can I please get some assistance in resolving this I am using the default sandbox merchant_id and merchant_key

Code to PayFast Custom Form integration

      <form action="https://sandbox.payfast.co.za​/eng/process">
          <input
            type="hidden"
            name="merchant_id"
            value={process.env.REACT_APP_MERCHANT_ID}
          />
          <input
            type="hidden"
            name="merchant_key"
            value={process.env.REACT_APP_MERCHANT_KEY}
          />
          <input
            type="hidden"
            name="return_url"
            value="http://127.0.0.1:3000/success"
          />
          <input
            type="hidden"
            name="cancel_url"
            value="http://127.0.0.1:3000/cart/cancel"
          />
          <input type="hidden" name="name_first" value="Junior" />
          <input type="hidden" name="name_last" value="Hlongwane" />
          <input
            type="hidden"
            name="email_address"
            value="jh0417783@gmail.com"
          />
          <input type="hidden" name="cell_number" value=<entered my number> />
          <input type="hidden" name="amount" value="800.00" />
          <input type="hidden" name="item_name" value="Test Item" />
          <input type="hidden" name="email_confirmation" value="1" />
          <input
            type="hidden"
            name="signature"
            value="f103e22c0418655fb03991538c51bfd5"
          />
          <button className="Cart__checkOutButton">
            PROCEED TO CHECKOUT
          </button>
        </form>