How to resuse same component without remounting it and access anywhere in dom tree?

i am creating a streaming app in react js my use case is this there is a camera component which is defined on the top level in App.js i want that component to be rendered at top level as well as inside any child component everywhere in dom which same component instance and state so that camera should not be remount and mount again in child component i have tried some solutions like react portals and react dom(deprecated can't use anymore) but none of them work accoridngly the camera component needs to mounted only one time in the APP.js so it wont rerender if i use in anywhere inside other component