Is this approach correct? Is it the right way?
No. No approach is correct and there is no right way to use both jQuery and React/Angular/Vue together.
jQuery manipulates the DOM by, for example, selecting elements and adding/deleting stuff into/from them. Typically, it selects an existing <div> and sets its text.
The other frameworks don’t manipulate the DOM; they generate it from data, and regenerate it whenever this data changes (for instance after an Ajax call).
The problem is, jQuery has no clue about React’s presence and actions, and React has no clue about jQuery’s presence and actions.
This will necessarily lead to a broken application, full of hacks and workarounds, unmaintainable, not to mention that you have to load two libraries instead of one.
For instance, jQuery will select a <button> and add it a .click() listener; but a split second later, React/Angular/Vue might regenerate the DOM and the button in the process, voiding jQuery’s .click(). So you’ll ask a question on Stackoverflow, wondering why the heck does your .click() not work. You’ll end up adding a dirty setTimeout() hack, in order to delay jQuery’s click() handler attachment until after React has regenerated your button. It’s straight up your highway to hell.
Solution : use jQuery OR (React/Angular/Vue), not both together.