Enable Avro Phonetic in all textboxes & textareas with a callback function

callback.html

<script src="path/to/avro-x.x.x.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	$(function(){
		$('textarea, input[type=text]').avro({'bangla':true}, 
			function(isBangla){
				alert('Bangla enabled = ' + isBangla);
			}
		);
	});
</script>

cann't add avro to react app

TypeError: jquery__WEBPACK_IMPORTED_MODULE_3___default(...)(...).avro is not a function

import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';
import $ from 'jquery'

function App() {

function handleBangla(e){
e.preventDefault()

    $(function(){
  $('textarea, input[type=text]').avro();
});

}
return (

<button onClick={(e)=>handleBangla(e)}>enable Bangla

);
}

export default App;