React Spring Leave Animation

Question

For some reason the menu leave transition isn't working and I can't figure out why. I want the menu to move in from far bottom and then once isMenuOpen === false have menu exit back downwards.Hopefully someone is able to enlighten me xD

I deleted a bunch of stuff from App.jsx for the sake of easier reading, so no one has to riffle through a ton of code.

App > Header > Nav

App.jsx

import React, { useState } from 'react';
import { useTransition } from 'react-spring';
import './scss/app-styles.css';
import { Outlet } from 'react-router-dom';
import Login from './view/Login';
import SignUp from './view/SignUp';
import Header from './view/Header';
import Footer from './view/Footer';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  // TEMP VALUE
  const [user] = useState(true);

  const animMenu = useTransition(isMenuOpen, {
    from: { opacity: 0, transform: 'translate3d(0, 1000%, 0)' },
    enter: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
    leave: { opacity: 0, transform: 'translate3d(-100%, 0, 0)' },
  });

  return (
    <div className="App">
        <>
          <Header anim={animMenu} isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen}/>
          <Outlet />
          <Footer />
        </>
    </div>
  );
};

export default App;

Header.jsx

import React from 'react';
import './scss/header-styles.css';
import * as HiIcons from 'react-icons/hi';
import Nav from '../NavHam';

function Header({ anim, isMenuOpen, setIsMenuOpen }) {
  const handleToggle = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <header>
      <div className="nav-ham" onClick={handleToggle}>
        <HiIcons.HiMenu />
      </div>
      {anim((style, item) => {
        if (item) {
          return (
            <Nav toggle={handleToggle} isOpen={isMenuOpen} style={style} />
          );
        }
      })}
    </header>
  );
}

export default Header;

Nav.jsx

import React from 'react';
import { animated } from 'react-spring';
import './scss/nav-styles.css';

const Nav = ({ isOpen, style }) => {
  return (
    <>
      {isOpen ? (
        <animated.div className="menu" style={style}>
          <div>
            <a href="/">Home</a>
          </div>
          <div>
            <a href="/">About</a>
          </div>
          <div>
            <a href="/">Contact</a>
          </div>
          <div>
            <a href="/">Login</a>
          </div>
          <div>
            <a href="/">Sign Up</a>
          </div>
        </animated.div>
      ) : (
        ''
      )}
    </>
  );
};

export default Nav;