I can't retrieve consistent information from my solidity smart contract using react and web3 - reactjs

Question

I try to interact with functions in my deployed contract using web3. It works fine to get information from metamask but it seems to return truncated value with my smart contract (?).
The request with await web3.eth.getAccounts() wotks fine, but the requests for the smart contract MyDeposit.methods.getBalance().call() and MyDeposit.methods.account().call()seem inconsistent.
here is a screen shot of html rendering
here is a screen sot of my console
I retrieve well my account (0x3B8F16325799ce799555243418df22C5c8e81f48) but I should have retrieved also 9000000000001 for MyDeposit.methods.getBalance and (0x3B8F16325799ce799555243418df22C5c8e81f48) for MyDeposit.methods.account. however, I just got (9) for MyDeposit.methods.getBalance and (0) for MyDeposit.methods.account. It looks like if only the first digit of good response was returned.
would be great if anyone could help. Txs
here is my code :
import React, { Component } from "react";
import Web3 from "web3";
import "./App.css";
import { TODO_LIST_ABI, TODO_LIST_ADDRESS, TODO_ENTER_YOUR_KEY } from "./config";
class App extends Component {
async UNSAFE_componentWillMount() {
await this.loadWeb3();
await this.loadBlockchainData();
}
async loadWeb3() {
if (window.ethereum) {
window.web3 = new Web3(window.ethereum);
await window.ethereum.enable();
} else if (window.web3) {
window.web3 = new Web3(window.web3.currentProvider);
} else {
window.alert("No ethereum broswer detected! You can check out MetaMask!");
}
}
async loadBlockchainData() {
const web3 = new Web3(
Web3.givenProvider ||
"https://goerli.infura.io/v3/" + TODO_ENTER_YOUR_KEY
);
const accounts = await web3.eth.getAccounts();
this.setState({ account: accounts[0] });
const MyDeposit = new web3.eth.Contract(TODO_LIST_ABI, TODO_LIST_ADDRESS);
console.log(MyDeposit);
const owners = await MyDeposit.methods.owner().call();
this.setState({ owner: owners[0] });
console.log("this.state.owner : " + this.state.owner);
await MyDeposit.methods.sendEther().call();
let balances = []
balances = await MyDeposit.methods.getBalance().call();
console.log(balances[0])
this.setState({ balance: balances[0] });
console.log(this.state.balance);
console.log("this.state.balance : " + this.state.balance);
}
constructor(props) {
super(props);
this.state = {
account:[],
balance: [],
owner: []
};
}
render() {
return (
<div>
<div className="container-fluid">
<div className="row">
<main
role="main"
className="col-lg-12 d-flex justify-content-center"
>
<div id="loader" className="text-center">
<p className="text-center">On progress...</p>
</div>
<div id="content">
<p> the account is : {this.state.account} </p>
<p> the balance is : {this.state.balance} </p>
<p> the owner is : {this.state.owner} </p>
<ul id="completedTaskList" className="list-unstyled"></ul>
</div>
</main>
</div>
</div>
</div>
);
}
}
export default App;
here is the config.js with smart contract ABI
export const TODO_LIST_ADDRESS = "0xe78a5c60fa13BBB677d4c1D37a007ed59bE5Ca2e";
export const TODO_ENTER_YOUR_KEY = "enter your infura key for testing";
export const TODO_LIST_ABI = [
{
"inputs": [],
"stateMutability": "nonpayable",
"type": "constructor"
},
{
"inputs": [],
"name": "getBalance",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "owner",
"outputs": [
{
"internalType": "address",
"name": "",
"type": "address"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [],
"name": "sendEther",
"outputs": [],
"stateMutability": "payable",
"type": "function"
},
{
"inputs": [
{
"internalType": "address payable",
"name": "recipient",
"type": "address"
},
{
"internalType": "uint256",
"name": "amount",
"type": "uint256"
}
],
"name": "transferEther",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "nonpayable",
"type": "function"
}
]

Answer 1

owner and balancese had to be declared in the array. It's now OK.
I wrote:
const owners = [await MyDeposit.methods.owner().call()];
const balances = [await MyDeposit.methods.getBalance().call()];
instead of previous:
const owners = await MyDeposit.methods.owner().call();
const balances = await MyDeposit.methods.getBalance().call();
It's now OK. I get the full field.