niReact Code working fine in PC browser but not on mobile browser

My code is working fine on my laptop browser but not submitting the form on mobile browser.

import { useEffect, useState } from "react";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import { uri } from "../constants/url";
import { ImageCard } from "./UI";

const Home = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [wapp, setWapp] = useState("");
  const [dob, setDob] = useState("");
  const [successAlert, setSuccessAlert] = useState(false);
  const [warningAlert, setWarningAlert] = useState(false);
  const [alertMsg, setAlertMsg] = useState("");
  const [dim, setDim] = useState(false);
  const [showCard, setShowCard] = useState(false);
  const [qr, setQr] = useState("");

  useEffect(() => {
    let timer;
    if (successAlert || warningAlert) {
      timer = setTimeout(() => {
        setDim(true);
        setTimeout(() => {
          setSuccessAlert(false);
          setWarningAlert(false);
          setAlertMsg("");
          setDim(false);
        }, 2000);
      }, 4000);
    }
    return () => clearTimeout(timer);
  }, [successAlert, warningAlert]);

  useEffect(() => {
    if (qr !== "") {
      setShowCard(true);
    }
  }, [qr]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (validateForm()) {
      const data = {
        name,
        email,
        wapp,
        dob,
      };
      try {
        let response = await axios.post(uri + "sendWifiPassword", data);
        const qrCode = response.data;

        if (qrCode) {
          setQr(qrCode);
          setShowCard(true);
        }
      } catch (error) {
        console.error("Error:", error);
      }
    }
  };

  const validateForm = () => {
    if (name === "") {
      setAlertMsg("Please provide you Full Name");
      setWarningAlert(true);
      return false;
    }
    if (email === "" && wapp === "") {
      setAlertMsg("Please fill out either Email address or WhatsApp number");
      setWarningAlert(true);
      return false;
    }
    if (wapp !== "" && !/03d{9}/.test(wapp)) {
      setAlertMsg("Please provide valid Number. Eg: 03125671234");
      setWarningAlert(true);
      return false;
    }
    return true;
  };

  console.log(showCard, qr);

  return (
    <div>
      <nav className="navbar bg-body-tertiary">
        <div className="container-fluid">
          <a className="navbar-brand">Wifi Demo</a>
          <a href="/admin" className="btn btn-warning">
            Admin
          </a>
        </div>
      </nav>

      <div className="d-flex justify-content-center">
        <div className="col-md-6 col-lg-2">
          {successAlert && (
            <div
              id="successAlert"
              className="alert alert-success"
              style={{ opacity: dim ? 0.5 : 1 }}
            >
              {alertMsg}
            </div>
          )}
          {warningAlert && (
            <div
              id="warningAlert"
              className="alert alert-warning"
              style={{ opacity: dim ? 0.5 : 1 }}
            >
              {alertMsg}
            </div>
          )}
        </div>
      </div>
      {showCard ? (
        <ImageCard imgSrc={qr} setQr={setQr} showCard={showCard} setShowCard={setShowCard} />
      ) : (
        <div id="formContainer">
          <div className="d-flex justify-content-center">
            <a>Please fill the form below to get Wifi Password</a>
          </div>
          <div className="d-flex justify-content-center">
            <div className="col-md-6 col-lg-2">
              <form id="userForm" onSubmit={handleSubmit}>
                <div className="mb-3">
                  <label htmlFor="name" className="form-label">
                    Full Name
                  </label>
                  <input
                    type="text"
                    className="form-control"
                    id="name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                  />
                </div>
                <div className="mb-3">
                  <label htmlFor="email" className="form-label">
                    Email address
                  </label>
                  <input
                    type="email"
                    className="form-control"
                    id="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </div>
                <div className="mb-3">
                  <label htmlFor="wapp" className="form-label">
                    Whats App #
                  </label>
                  <input
                    type="text"
                    className="form-control"
                    id="wapp"
                    value={wapp}
                    onChange={(e) => setWapp(e.target.value)}
                  />
                </div>
                <div className="mb-3">
                  <label htmlFor="dob" className="form-label">
                    Date of Birth
                  </label>
                  <input
                    type="date"
                    className="form-control"
                    id="dob"
                    value={dob}
                    onChange={(e) => setDob(e.target.value)}
                  />
                </div>
                <button type="submit" className="btn btn-warning">
                  Submit
                </button>
              </form>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default Home;

I’ve tried changing background color to check where the problem. I’ve condition in handleSubmit() to check if (qr) exists then proceed, if I set background color to red here, it will change on web browser but not on mobile browser,

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (validateForm()) {
      const data = {
        name,
        email,
        wapp,
        dob,
      };
      try {
        let response = await axios.post(uri + "sendWifiPassword", data);
        const qrCode = response.data;

        if (qrCode) {
          setQr(qrCode);
          setShowCard(true);
        }
      } catch (error) {
        console.error("Error:", error);
      }
    }
  };

NOTE: I’ve manually copied the image data from log and provided it in the following component and it works fine on both laptop and mobile browser:

  <ImageCard imgSrc={qr} setQr={setQr} showCard={showCard} setShowCard={setShowCard} />

I’ve setup CORS in Back End and I’m sending req on my local network not local host (i.e, http://{my_ip_address}:5000) and its working on both browsers:

app.use(cors({
  origin: '*',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  headers: ['Content-Type', 'Authorization']
}));