Navigate to navigate when the corresponding button is clicked in Android JavascriptInterface

I want to call navigate on click of Javascript button onClick function onClickButton using JavascriptInterface in Android Kotlin WebView.

Kotlin code is structured like this.

inner class JavaScriptInterface
{
    @JavascriptInterface
    fun register(data: String){
        navigate(
            tDirections.actionxnut08EventToEventJoinForm()
        )
    }
}

The Javascript code is structured like this.

const onClickButton = () => {
   
}

return (
     <button onClick={() => onClickButton()}></button>
)

How can I call navigate when onClick Button is clicked?