One of two useEffect is not getting executed

In the below code, I declare two useEffects, both with empty dependency array. The first useEffect is not getting executed. If I switch the order of the two useEffects, and whichever one comes first doesn't get executed.

What's going on? How can I fix this?

import React, {createContext, useState, useEffect, useRef, useContext} from 'react'
import { ethers } from 'ethers'
import Web3Modal from 'web3modal'
import { useNavigate } from 'react-router-dom'
import { ABI, ADDRESS } from '../contract'

//globally storing the state variable so that we can acces on any page and any component

const GlobalContext = createContext()

export const GlobalContextProvider = ({children})=>{
    //interact and connect with our smart contract

    const [walletAddress, setWalletAddress] = useState('')
    const [provider, setprovider] = useState('')
    const [contract, setcontract] = useState(null)
    const [showAlert, setshowAlert] = useState({status: false, type: 'info', message: ''})

    //set the walletAddress to the state
    const updateCurrentWalletAddress = async ()=>{
        //window.ethereum object injects web3 functionality in browser
        //getting all account addresses
        const accounts = await window.ethereum.request({method : 'eth_requestAccounts'})

        console.log("Hello from updateCurrentWalletAddress")
        if(accounts) setWalletAddress(accounts[0]) 
    }
   

    useEffect(() => {
      updateCurrentWalletAddress()
      window.ethereum.on('accountsChanged', updateCurrentWalletAddress)
    }, [])

    
    //set the smart contract and provider to the state
    useEffect(() => {
      const setsmartContractAndProvider = async ()=>{
        //connecting to wallet
        const web3Modal = new Web3Modal()
        const connection = await web3Modal.connect()
        const newProvider = new ethers.providers.Web3Provider(connection)
        const signer = newProvider.getSigner()
        //getting instance of smart contract
        console.log("Hello from setsmartContractAndProvider")
        console.log({signer})
        console.log({walletAddress})
        const newContract = new ethers.Contract(ADDRESS, ABI, signer)
        setprovider(newProvider)
        setcontract(newContract)
      }
      setsmartContractAndProvider()

    }, [])

    
    useEffect(() => {
      if(showAlert?.status){
        const timer = setTimeout(()=>{
          setshowAlert ({status: false, type: 'info', message: ''})
        }, [5000])
        //always good to clear timers when setting them in useEffect
        return ()=> clearTimeout(timer)
      }
    }, [showAlert])
    
    

    //values of variables declared in "value" field is stored globally
    //we can access it by importing useGlobalContext()
    return(
      <GlobalContext.Provider value={{
        contract, walletAddress, showAlert, setshowAlert
      }}>
        {/*children are <Home />, <CreateBattle /> etc  */}
        {children}
      </GlobalContext.Provider>
    )
}

//useContext hook is used to manage state globally
export const useGlobalContext = ()=> useContext(GlobalContext)

I assume by separating these functionalities into different useEffect hooks, the code is easier to read, understand and maintain,
BUT
The issue you are facing is because the second useEffect hook is blocking the event loop, so the first useEffect hook cannot execute until the second useEffect hook has completed.
Combine the logic of the first and second useEffect hooks into a single useEffect hook. This will ensure that the logic runs in the correct order, and the first hook won't be blocked by the second hook.

useEffect(() => {
  const updateCurrentWalletAddress = async () => {
    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
    if (accounts) setWalletAddress(accounts[0]);
  };

  const setsmartContractAndProvider = async () => {
    const web3Modal = new Web3Modal();
    const connection = await web3Modal.connect();
    const newProvider = new ethers.providers.Web3Provider(connection);
    const signer = newProvider.getSigner();
    const newContract = new ethers.Contract(ADDRESS, ABI, signer);
    setprovider(newProvider);
    setcontract(newContract);
  };

  updateCurrentWalletAddress();
  window.ethereum.on('accountsChanged', updateCurrentWalletAddress);
  setsmartContractAndProvider();
}, []);