Use Moralis as provider in React - await isn't allowed in non-async function error

[0xCardiE]

I am trying to use moralis as web3 provider as stated here https://docs.moralis.io/moralis-dapp/web3/web3
So I tried something like this in react component

const provider = await enableWeb3();
const raffleContract = new ethers.Contract(raffleAddress, abi, provider);

but all I get is this below, so I wonder how could i pull web3 provider to init from moralis and work in react component?

await isn't allowed in non-async function

[krakxn]

Show the entire function

[0xCardiE]

Its is added into our raffle tutorial as one component, and errors as above either Moralis.enableWeb3 or just enableWeb3

import { contractAddresses, abi } from "../constants";
import { useMoralis, useWeb3Contract } from "react-moralis";
import { useEffect, useState } from "react";
import { useNotification } from "web3uikit";
import { ethers } from "ethers";

export default function Enter() {
    const { enableWeb3, Moralis, isWeb3Enabled, chainId: chainIdHex } = useMoralis();
    const chainId = parseInt(chainIdHex);
    const raffleAddress = chainId in contractAddresses ? contractAddresses[chainId][0] : null;

    const provider = await Moralis.enableWeb3();
    const raffleContract = new ethers.Contract(raffleAddress, abi, provider);

    return (
        <div className="p-5">
            {raffleContract }
        </div>
    );
}

[krakxn]

Missing async keyword in the function signature (export default function Enter() {).

Add it to fix your problem.

[0xCardiE]

This didn't really help as some other problems occurred, but I found a solution to use the async anon function and add it to useEffect of component. So this is what I am using and it works without issues.

 useEffect(() => {
        if (isWeb3Enabled) {

            (async () => {
                const provider = await Moralis.enableWeb3();
                const raffleContract = new ethers.Contract(raffleAddress, abi, provider);
            })();
        }
    }, [isWeb3Enabled]);

[0xCardiE]

I used this one to solve it. Loads moralis provider right when needed.

useEffect(() => {
       if (isWeb3Enabled) {

           (async () => {
               const provider = await Moralis.enableWeb3();
               const raffleContract = new ethers.Contract(raffleAddress, abi, provider);
           })();
       }
   }, [isWeb3Enabled]);