Calling a Function from Smart Contract through App (React Js + Android Capacitor)

Question

I have a React Js app and have added Android capacitor to convert it to an Android app. The app is working fine but now I want to add a feature that requires me to transact with a deployed Ethereum smart contract. I am quite new to the field but through reading, I gathered that the usual approach for React is by using web3, and for mobile app, they use web3j (please correct me if I am wrong).

But I do not know how to apply it to my case here, where I have a React JS app with Android capacitor, because I make changes to the pages using React JS, but want it to work for Android. How can I call the smart contract functions and which library should I use so it can work on the final Android app?

(P.S. The goal here is only to make it work on the Android app.)

Here is a JavaScript where I call my smart contract function:

const Contract = require('web3-eth-contract')
const Web3 = require('web3')
const Tx = require('ethereumjs-tx').Transaction;

Contract.setProvider('MY-INFURA-WSS');
var web3 = new Web3(new Web3.providers.HttpProvider('MY-INFURA-HTTPS'));
const abi = [my-abi]

var contract = new Contract(abi, "MY-CONTRACT-ADDRESS");

contract.methods.MyMethod("MY-PARAMETER").call({from: "MY-ADDRESS"}).then((receipt)=>{
    console.log("Receipt: ", receipt);
})

This script works just fine, but then when I insert it to my .js file in my React JS app and use capacitor to run it on my mobile device, it resulted to this error:

Error: Provider does not have a request or send method to use.

I think it's a problem with the provider,, but I don't know how to solve it. So I don't know whether it works or not because that error came up (I couldn't even get to testing the actual method call).