How to properly implement MoralisDappProvider as a React component?

Question

There's some code in the documention of Moralis and at github, but it no longer works.

For instance:

import React, { useEffect, useState, useMemo } from "react";
import { useMoralis } from "react-moralis";
import MoralisDappContext from "./context";

function MoralisDappProvider({ children }) {
  const { Moralis, user, web3, enableWeb3, isWeb3Enabled } = useMoralis();
  // const web3Provider = /*await*/ Moralis.enableWeb3();  //needed at all?


  useEffect(() => {
    Moralis.onChainChanged(function (chain) {
      setChainId(chain);
    });

    Moralis.onAccountChanged(function (address) {
      setWalletAddress(address[0]);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);


  // doesn't work
  useEffect(() => setChainId(web3.givenProvider?.chainId)); // "givenProvider" doesn't exist


  //.....

Not to mention that there's no code as a whole, but there're only pieces of code: one here, other there.... and some don't work. How to glue them, after all?

The givenProvider? property doesn't even exist.

Is there code that works?

How to, generally, properly implement MoralisDappProvider component?