Implementing drawer (Offcanvas) in react - reactjs

Question

I am trying to implement Drawer (Offcanvas) component in react, so here the requirement is, there will be one Drawer whose component will change dynamically, consider something like bootstrap modal, you have one modal but you can trigger that modal from anywhere from the page just write data-toggle="modal" data-target="#modalid", but implementing this in react requires communicating between 2 root components & setting drawers component data from the triggering component or button. I have seen people added trigger & modal in same component & than passing state.toggle flag like below:
render() {
return (
<div>
<Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
<Drawer isOpen={this.state.drawer} toggle={this.toggle} className={this.props.className}>
<DrawerBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</DrawerBody>
</Drawer>
</div>
);
}
But in my case, there is no relationship between components, this component <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button> will be added in multiple places & there is no coupling between Drawer & Button. So how I can achieve this without using any state management like Redux or Flux or anything else