My contract code is as follows:

    pragma solidity >= 0.5.0 < 0.7.0;

     contract StoreData  {

      address public owner;

      constructor () public {
       owner = msg.sender;
       }

      modifier onlyOwner() {
      require(msg.sender == owner,"This function can be called only by the owner of the 
       contract.");
       _;
      }

      struct ProductInfo {
      uint256 productId;// Product Id.
      string  productName;// Product name.
      uint256  price;//Product price.
      string  manufacturerName;//Manufacturer name.
      }

      // mapping to store productId.
      mapping (uint => bool) public productIds;

      // mapping to store productInfo with productId as a key.
      mapping (uint256 => ProductInfo) public products;

      //Event generated upon storing data.
      event DataStored(uint256 productId);

      //Function to store data. OnlyOwner of the contract can store data.
      function store(uint256 _productId, string memory _productName, uint256 _price, string memory _manufacturerName) public onlyOwner {
        require(!productIds[_productId],"Product Id already exists.");
        ProductInfo memory newProduct = ProductInfo({
        productId : _productId,
        productName : _productName,
        price : _price,
        manufacturerName : _manufacturerName
        });
       products[_productId] = newProduct;
       productIds[_productId] = true;
       emit DataStored(_productId);
     }

     //Function to retrieve data.
     function getData(uint256 _productId) public onlyOwner view returns(uint256,string 
     memory,uint256,string memory)  {
        require(productIds[_productId],"Product Id does not exist");
        return (
            products[_productId].productId,
            products[_productId].productName,
            products[_productId].price,
            products[_productId].manufacturerName
            );
       }

     }

================================================================================================

I am calling these functions from a React application using web3.js as follows:

     import React , { Component }from 'react';
     import web3 from './getWeb3';

     class DataRetrieveForm extends Component {

    state = {
        productId : "",
        product: [],
        errorMessage: "",
        loading: false
    }

    onSubmit = async (event) => {

        try {

             const accounts = await web3.eth.getAccounts();

             const storedata = new web3.eth.Contract(storedataabi,storedataaddress)


             const prod = await storedata.methods.getData(parseInt(this.state.productId))
                                            .call({'from': accounts[0]});
                                //storedataabi-contract abi,storedataaddress-contract address  

        console.log(prod);

        } catch (err) {
            this.setState({ errorMessage: err.message});
            console.log("errorMessage: " + this.state.errorMessage);
        } 
    }

    render () { jsx code }

Upon calling the getData() function with the input parameter as 1 in the web application, I'm getting the following error:

errorMessage: invalid tuple value (coderType="tuple", value=1) 

I've tried various ways of passing the parameters to the function

await storedata.methods.getData(parseInt(this.state.productId),{'from': accounts[0]});

but same error.

Same thing happens when i call store() function as well like so

await storedata.methods.store(parseInt(this.state.productId),this.state.productName,parseInt(this.state.price),this.state.manufacturerName).send({ from: accounts[0]});

I have been stuck with this for a long time, not sure what to do. Please help and let me know where am i going wrong.