why does ether provider return nothing when refreshing page on a react website?

I have been creating a front end to interact with a smart contract. The smart contract that I has been one that I deployed on test network. The way I am setting up the provider uses the 'ether' library and the provider that I use is infura.

async function loadWeb3() {
                // console.log('hit');
        if (window.ethereum) {
                  window.ethereum.enable()
          setProvider(`await new ethers.providers.InfuraProvider('rinkeby',API_KEY)`);         
            console.log(provider);
                }
                
      }

The above function is how I try to set the provider to a useState. The connection to the contract works when I am running it on a local host and change some aspect of the react app and save and thus updates the react app on the host. Although this does not work when I choose to refresh the page. Instead when I check the output of

await new ethers.providers.InfuraProvider('rinkeby',API_KEY)

The returned value is " ", I am able to see this by printing it on the console, but when I print it using the above steps of saving some change while in development the output is instead

"InfuraProvider {_isProvider: true, _events: Array(0), _emitted: {…}, disableCcipRead: false, formatter: Formatter, …}"

I am using a useEffect within the component to call the function "loadWeb3". I have not found a way to fix this or why this would be happening. Any help is appreciated :)