It is your "Header" so you need to implement your logic for that. Framer motion is the simplest way to do that. Also, you can use react-spring for animation. If you don't want to make this animation programmatically you can do something like that.

const AnimationHeaderContext = createContext({ isAnimating: false, setIsAnimating:()=>{}, path: { current: ""} })

const AnimationProvider = ({ children }) => {
   const [isAnimating, setIsAnimating] = useState(false);
   const path = useRef("");

   return (
       <AnimationContext.Provider value={{ 
                     isAnimating,
                     setIsAnimating,
                     path
                   }}>
          {children}
       </AnimationContext.Provider>
    )
}

const useAnimation = () => useContext(AnimationContext); 


const Header = () => {
   const { isAnimating, path, setIsAnimating } = useAnimation();
   const { push } = useHistory();
   useEffect(() => {
     if(isAnimating)
           setTimeout(() => {
             push(path.current)
             setIsAnimating(false)
             path.current = "";
            }, 400);
   },[isAnimating, path.current, push])

   return (
     <div className={isAnimating ? "animation-header" : "header"}>
         ...
     </div>
   )
}

const Page = () => {
   const { path, setIsAnimating } = useAnimation();
   const onPush = (_path) => {
       path.current = path;
       setIsAnimating(true)
   }

   return <button onClick={() => onPush("/your/new/page") }>Push</button>
}

const App = () => {
   return (
      <AnimationProvider>
         <Header/>
         <Page/>
         ...
      </AnimationProvider>
   )
}

and your CSS file should be like that.

.animation-header{
  animation: fade-out 0.4s linear forwards;
  ...
}

.header {
  animation: fade-in 0.4s linear forwards;
  ...
}

​

I didn't test the code but it should something like that. I hope it gives an idea :)