Jquery Terminal with ReactJs how to make a terminal reference global?

Question

I am trying to include Jquery Terminal in my react application. I have got the terminal to display and to interpret commands from my custom interpreter function, however I need to reference the terminal from different scripts (mostly the term.echo function), and I am not sure what the best practice is for this.

So far I have the following setup.

My html looks like this

 <div className="content expand">
          
 </div>

I then initialize the terminal in the use effect hook. After importing

import $ from 'jquery'
import 'jquery.terminal'
import 'jquery.terminal/css/jquery.terminal.css';

useEffect(() => {
        $('.content').terminal({}, base);
      }, []);

I then push a interpreter from another script which works fine.

term.push(FirstTerm.interpreter, {}); 

The interpreter function in FirstTerm is as follows

interpreter: function(command, term) {
           console.log(term);
// id like to call a function from another script here, without passing a reference to term through, id like to just grab a reference to the global terminal object in that script. I have tried $.terminal but it is undefined. Which is not the case in my vanilla JavaScript/html implementation. 
        }

As the comment above id like to call a function from another script here, without passing a reference to term through, id like to just grab a reference to the global terminal object in various other scripts throughout my react app that either log to the terminal, or are triggered by the terminal. I have tried $.terminal but it is undefined. Which is not the case in my vanilla JavaScript/html implementation.

I thought about using useContext and passing a reference to term around but this seems like it could cause a big performance hit.