تداخل jquery و react

سلام

فرض کنید شما چند فایل js زیر در پروژه دارید
 jquery.min.js
 bootstrap.bundle.min.js
 jquery.slimscroll.min.js   
 main.js
همه این فایل بوسیله gulp یا webpack  تبدیل به یک فایل js شده که minfiy هم شده و در فایل index.html در فولدر public در پروژه react بوسیله تگ script اون فراخوانی میکنید
فرض کنید من در یک جایی می خوام با یک hover بروی یک tag یک tooltip بازبشه
خوب ما در tooltip bootstrap   داریم و خود پکیج react-bootstap هم موجود است و میتونیم استفاده کنیم
برای از tooltip طبق ,خود راهنما سایت bootstrap    باید دستور زیر بنویسم

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

 ما دستور بالا در فایل main.js میذاریم 
اما کار نمیکنه 
با بررسی هایی که انجام دادم احتمال دادم به خاطر اینکه jquery نمی تونه در حالت load اون تگ پیدا کنه
 اما بعضی وقت ها پیدا می کرد و کار می کردم ولی وقتیکه به کامپونت دیگه میرفتیم دیگه کار نمی کرد
ما کتابخانه ها و پلاگین های کاربردی  زیادی با jquery داریم که در وقت ما صرفه جویی میکنند اگر بخواهیم اونها با js  خام بنویسیم کلی طول میکشه از طرفی خیلی از این پکیج های کاربردی برای حالت react پیاده سازی نشدن 
از طرفی خیلی از برنامه نویس ها js  میرن angularJS یا vueJS یاد میگرن ولی همشون jquery بلدم 
منظورم اینکه باید تداخلات react و jquery حل بشه نباید در جواب گفت اگر از react  استفاده میکنی دیگه نباید از jquery  استفاده کنی