Using a provider to render content into a sibling or parent

Editor.tsx

const Editor = () => {
  // ...
  useTopBarContent(
    <ValidationBar />
  );

  return (
    // ...
  );
};

TopBar.tsx

const TopBar = () => {
  //...
  const { content } = useContext(TopBarContext);
  //...
  return (
    <AppBar position="fixed">
      <NavMenu />
      {content} 
      <AccountMenu />
    </AppBar>
  );
};

TopBarProvider.tsx

import React, { createContext, useState, useContext, useEffect } from 'react';

type TopBarContent = React.ReactNode | null;

type TopBarContentState = {
  content: TopBarContent;
  setTopBarContent: (c: TopBarContent) => void;
};

export const TopBarContext = createContext<TopBarContentState>({
  content: null,
  setTopBarContent: () => {},
});

export const useTopBarContent = (c: TopBarContent) => {
  const {
    setTopBarContent
  } = useContext(TopBarContext);

  useEffect(() => {
    setTopBarContent(c);

    return () => {
      setTopBarContent(null);
    };
  }, []);
};

type Props = {
  children: React.ReactNode;
};

const TopBarProvider = ({ children }: Props) => {
  const [content, setTopBarContent] = useState<TopBarContent>(null);

  return (
    <TopBarContext.Provider value={{ content, setTopBarContent }}>
      {children}
    </TopBarContext.Provider>
  )
};

export default TopBarProvider;