Spring.js

import React, { useState } from 'react';
import { Transition } from 'react-spring/renderprops';
import Nav from './Nav';

function UseSpring() {
  const [display, setDisplay] = useState(false);
  return (
    <div>
      <Transition
        items={display}
        from={{ transform: 'translate3d(-100%,0,0)' }}
        enter={{ transform: 'translate3d(0,0,0)', bgOpacity: 1 }}
        leave={{ transform: 'translate3d(-150%,0,0)', bgOpacity: 0 }}
      >
        {display => (display
          ? styles => (
            <Nav
              display={display}
              setDisplay={setDisplay}
              style={{
                transform: styles.transform,
                ...styles,
              }}
            />
          )
          : null)
            }
      </Transition>
      <div style={{ zIndex: 9 }}>
        <button onClick={() => setDisplay(!display)}>show</button>
      </div>
    </div>
  );
}

export default UseSpring;