Change state dinamically based on the internet connectivity – React (offline/ online)

I have a React component, that holds the availability flag of internet connectivity. UI elements have to be dynamically changed according to state real-time. Also, functions behave differently with the change of flag.

My current implementation polls remote API using Axios in every second using interval and updates state accordingly. I am looking for a more granular and efficient way to do this task to remove 1 second error of state with the minimum computational cost. Considered online if and only if device has an external internet connection

current implementation :

class Container extends Component{
    constructor(props){
        super(props)
        this.state = {
            isOnline:false
        }
        this.webAPI = new WebAPI() //Axios wrapper
    }

    componentDidMount() {
        setInterval(()=>{
            this.webAPI.poll((success)=>this.setState({isOnline:success})
        }, 1000)
    }

    render(){
        return(<ChildComponent isOnline={this.state.isOnline}/>)
    }

}

Edited:

Looking for a solution that capable of detecting external internet connectivity. The device can connect to a LAN which doesn’t have an external connection. So, it is considered offline. Considers online if and only if device has access to external internet resources.

Source: ReactJs