Input in sweetalert 2 not typeable in material UI modal react js

I have a card to display an order and inside the card on cancellation sweetalert2 popup opens asking for cancellation reason. This is working just fine on orders screen.

<Grid item md={8} sm={12}>
    orders.map((order) => <SupplierOrderBlock data={order} />)
</Grid>

And on Cancellation these swal fire. First one to ask the user to enter reason and if user doesnt enter a reason the second sweetalert to prompt user to enter a reason in order to cancel.

const cancelOrder = (orderID, status) => {
    Swal.fire({
      title: "Are You Sure You Want to Cancel Order",
      text: "Please Enter the reason for the cancellation of order",
      input: "text",
      showCancelButton: true,
      confirmButtonColor: "#1c8fec",
      cancelButtonColor: "#fa013b",
      customClass: 'swal-wide'
    }).then((result) => {
      if (result.value == '') {
        swal({
          title: "You can not cancel without giving a reason",
          showCancelButton: true,
          confirmButtonColor: "#1c8fec",
          cancelButtonColor: "#fa013b",
          buttons: {
            Confirm: { text: "Okay", className: "okayButton" },
          },
        });
      }
else if (result.isConfirmed) { //cancel order}

This is working just fine.

Now when i try to use this same component on my dashboard inside a Material UI modal it doesnt let me enter text.

<Modal
        open={modal}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
        style={{ width: "60%", zIndex: 1, marginLeft: '-10%' }}
      >
        <Box style={{ marginLeft: "50%", marginTop: "25vh", width: "100%", position: 'absolute' }}>
          <SupplierOrderBlock data={supplierorder} />
        </Box>
      </Modal>

If i remove Z-index property from Modal then swal goes behind the modal

But on closing the modal it lets us enter reason