Создание многоразового компонента боковой панели вне холста в React Hooks

Question

Я пытаюсь создать повторно используемый компонент боковой панели вне холста, используя React Hooks.

Теперь я могу создать все это в одном файле, например:

...
const Sidebar = props => {
  const [showSidebar, setSidebar] = useState(true)

  return (
    ...
      <Button onClick={() => setSidebar(!showSidebar)}>Click Me</Button>
      ...
      {showSidebar && <Box align="center" justify="center" {...props} />}
    ...
  )
}

Но это НЕ то, что я хочу сделать. Это заставляет меня иметь компонент Button как часть компонента Sidebar. То, что я хочу, - это свобода размещать компонент кнопки там, где я хочу, и по-прежнему включать или выключать его на боковой панели. Как то так:

...
const SomeCompoment = props => {
  const [showSidebar, setSidebar] = useState(true)

  return (
    ...
      <Button onClick={() => setSidebar(!showSidebar)}>Click Me</Button>
      ...
      <Sidebar>Sidebar Content</Sidebar>
    ...
  )
}

Однако я не могу понять, как заставить это работать. Мне нужен способ связать нажатие на кнопку с этим конкретным экземпляром боковой панели.

Более того, я НЕ хочу использовать логику {showSidebar && ...} каждый раз, когда я хочу использовать компонент боковой панели. Мне бы хотелось, чтобы эта логика содержалась в самом компоненте боковой панели.

Есть идеи, как это сделать?