Updating transition animation values pre / post mount using React-Router?

[MediumBlock]

I am having issues with a bug arising when I try to make a simple app where I can use the mousewheel to scroll up and down and each scroll of the mousewheel will navigate me to a new route.

One scroll down of the mousewheel should make the current route disappear from the screen in an upwards motion (in my code this is done by y: -1000), and the new route should appear starting from the bottom of the screen and moving upwards until it reaches y: 0.

For my first component (Main.js) this is easy enough as I can hardcode the initial and exit values of the animation because there are no routes about it, such as in the code below:

Main.js

import React, { useState, useRef, useEffect, useContext } from "react";
import { motion } from "framer-motion";
import { useLocation, useNavigate } from "react-router-dom";

export default function Main() {
  const location = useLocation();
  const navigate = useNavigate();
  const { pathname } = location;
  const [isUp, setIsUp] = useState(false);

  useEffect(() => {
    function handleNavigation(e) {
      if (e.deltaY > 1) {
        setIsUp(false);
        navigate("/skills");
      }
    }
    window.addEventListener("wheel", handleNavigation);

    return () => window.removeEventListener("wheel", handleNavigation);
  });

  return (
    <motion.div
      className="main--container"
      initial={{  y: -1000, transition: { duration: 0.8 } }}
      animate={{  y: 0, transition: { duration: 0.8 } }}
      exit={{  y: -1000, transition: { duration: 0.8 } }}
    ></motion.div>
  );
}

The problem I'm having is I need the initial and exit values to change from either -1000 to 1000 or vice versa depending on if the user is mouse wheeling up or down.

my current structure for component Routes is as follows:

Main <-> Skills <-> AboutMe <-> Work

Where mousewheel down moves to the right -> and mousewheel up to the left <-

If I am on skills and I am going up to Main, I require the initial and exit values for the Skills component to be y:1000 for both, but if I am going down to the AboutMe component I need the Skills initial and exit values to be y: -1000, (and the AboutMe component would need to be y:1000 for both as well).

So my question is, How can I achieve dynamically changing these values in the most painless way possible?

I've tried the following:

passing down props from the AnimatedRoutes.js parent Component to try and update the value whilst also having it control which route to navigate to, but it appears on mounting / unmounting it doesn't give the correct props.

Having each component control its own state and and navigating to each component, this works for changing its own initial and exit values, but I also need it to work in tandem with the component its navigating to, I need both components to update their value before the transition occurs.

please take a look at a live example below, the first two components (Main.js & Skills.js) have hard coded values to show you how I intend for the transition to look like, if you mouse wheel up and down on these you will notice a smooth transition, however when moving down to the other components you will notice it is out of sync, sometimes it initialises / exits from the wrong direction, sometimes they go in opposite directions, it is quite an annoying problem that seems small but I have yet to be able to figure out.

Live Working Example:

https://stackblitz.com/edit/react-ts-w42djd?embed=1&file=App.tsx