How to resolve No `Web3Provider Found` Exception web3-react?

Question

I am getting a No <Web3Provider ...> Found. when my React Typescript app loads and tries to call the context manager method setFirstValidConnector as described in the latest 5.0.3 web3-react here

This is the full code:

./wallet/connect.ts

import { Connectors } from 'web3-react'
const { InjectedConnector } = Connectors

const metamask = new InjectedConnector({ supportedNetworks: [1, 4] })
const alchemy = new Connectors.NetworkOnlyConnector({ providerURL:  "https://eth-rinkeby.alchemyapi.io/v2/..."});
export const connectors = { metamask, alchemy }

App.tsx

import React, { useEffect } from 'react';
import Web3Provider, { useWeb3Context } from 'web3-react';
import { connectors } from './wallet/connect';

export default function App() {
  const context = useWeb3Context()
  useEffect(() => {
    context.setFirstValidConnector(['metamask', 'alchemy']) // => No <Web3Provider ...> Found.
  }, [])

  return (
    <Web3Provider 
      connectors={connectors}
      libraryName={'ethers.js'}
    >
      <div className="App">
        <ButtonAppBar />
        <AboutSection />
        <Workspace />
      </div>
    </Web3Provider>
  );
};

Does anyone happen to see where I'm going wrong? Thank you!