Please tell me the correct way to inject specific JavaScript to the WebView depending on which page is currently being viewed in the WebView?

I want to show 2 steps. Step 1 is successful but when the WebView loads the second page the second step of JavaScript is not successful.

     const injectedJavaScript: = `
    let currentStep = "step1";
    if(currentStep === 'step1') {
      document.getElementById('username').value =  '${
        this.props.username
      }'; document.getElementById('password').value = '${
        this.props.password
      }'; document.getElementById('login').click();
      currentStep = 'step2';
    } else if(currentStep === 'step2' && window.location.href === "https://www.example.com") {
      currentStep = 'download';
      document.getElementsByClassName('button')[0].click();
    }
    `;

 <WebView
        ignoreSslError={true}
        source={{ uri: "https://www.example.com" }}
        style={{ marginTop: 20, height: 400, width: 400 }}
        injectedJavaScript={injectedJavaScript}
        javaScriptEnabledAndroid={true}
        onError={() => this.webviewError(e)}
        startInLoadingState={true}
        scalesPageToFit={true}
      />