Proper Usage Of Web3API in React

Hey all I’m a new developer just trying to wrap my head around the proper structure and usage of Moralis.Web3API in a React DAPP. I’m trying to use this function described in the docs to get liquidity reserves formatted and displayed on my page:

import React from "react";
import { useMoralisWeb3Api } from "react-moralis";

const Web3Api = useMoralisWeb3Api();

const fetchPairReserves = async () => {
  const options = {
    pair_address: "0x58f876857a02d6762e0101bb5c46a8c1ed44dc16",
    chain: "bsc",
  };
  const reserves = await Web3Api.defi.getPairReserves(options);
  console.log(reserves);
};

how can I make this a component that can be imported and summoned with these options :

<FetchReserves display="usd | tkn" token="reserve0 | reserve1" />