How to use the react-spring/web.cjs.useSpring function in react-spring

const Fade = React.forwardRef(function Fade(props, ref) {
  const { in: open, children, onEnter, onExited, ...other } = props;
  const style = useSpring({
    from: { opacity: 0 },
    to: { opacity: open ? 1 : 0 },
    onStart: () => {
      if (open && onEnter) {
        onEnter();
      }
    },
    onRest: () => {
      if (!open && onExited) {
        onExited();
      }
    },
  });

  return (

const Fade = React.forwardRef(function Fade(props, ref) {
  const { in: open, children, onEnter, onExited, ...other } = props;
  const style = useSpring({
    from: { opacity: 0 },
    to: { opacity: open ? 1 : 0 },
    onStart: () => {
      if (open && onEnter) {
        onEnter();
      }
    },
    onRest: () => {
      if (!open && onExited) {
        onExited();
      }
    },
  });

  return (

function TransitionComponent(props: TransitionProps) {
  const style = useSpring({
    from: { opacity: 0, transform: 'translate3d(20px,0,0)' },
    to: { opacity: props.in ? 1 : 0, transform: `translate3d(${props.in ? 0 : 20}px,0,0)` },
  });

  return (
    
      
    
  );
}

function TransitionComponent(props: any) {
  const style = useSpring({
    from: { opacity: 0, transform: "translate3d(30px,0,0)" },
    to: {
      opacity: props.in ? 1 : 0,
      transform: `translate3d(${props.in ? 0 : 30}px,0,0)`
    }
  });

  return (
    
      
    
  );
}

function TransitionComponent(props: any) {
  const style = useSpring({
    from: { opacity: 0, transform: "translate3d(30px,0,0)" },
    to: {
      opacity: props.in ? 1 : 0,
      transform: `translate3d(${props.in ? 0 : 30}px,0,0)`,
    },
  });

  return (
    
      
    
  );
}

function TransitionComponent(props) {
  const style = useSpring({
    from: { opacity: 0, transform: 'translate3d(20px,0,0)' },
    to: { opacity: props.in ? 1 : 0, transform: `translate3d(${props.in ? 0 : 20}px,0,0)` },
  });

  return (
    
      
    
  );
}

const Fade = React.forwardRef(function Fade(props, ref) {
  const { in: open, children, onEnter, onExited, ...other } = props;
  const style = useSpring({
    from: { opacity: 0 },
    to: { opacity: open ? 1 : 0 },
    onStart: () => {
      if (open && onEnter) {
        onEnter();
      }
    },
    onRest: () => {
      if (!open && onExited) {
        onExited();
      }
    },
  });

  return (

const Fade = React.forwardRef(function Fade(props, ref) {
  const { in: open, children, onEnter, onExited, ...other } = props;
  const style = useSpring({
    from: { opacity: 0 },
    to: { opacity: open ? 1 : 0 },
    onStart: () => {
      if (open && onEnter) {
        onEnter();
      }
    },
    onRest: () => {
      if (!open && onExited) {
        onExited();
      }
    },
  });

  return (

if ( prefersReducedMotion ) {
			return;
		}
		ref.current.style.transform = 'none';
		const destination = ref.current.getBoundingClientRect();
		const newTransform = {
			x: previous ? previous.left - destination.left : 0,
			y: previous ? previous.top - destination.top : 0,
		};
		ref.current.style.transform = newTransform.x === 0 && newTransform.y === 0 ?
			undefined :
			`translate3d(${ newTransform.x }px,${ newTransform.y }px,0)`;
		triggerAnimation();
		setTransform( newTransform );
	}, [ triggerAnimationOnChange ] );
	const animationProps = useSpring( {
		from: transform,
		to: {
			x: 0,
			y: 0,
		},
		reset: triggeredAnimation !== finishedAnimation,
		config: { mass: 5, tension: 2000, friction: 200 },
		immediate: prefersReducedMotion,
	} );

	return {
		transformOrigin: 'center',
		transform: interpolate(
			[
				animationProps.x,
				animationProps.y,

export const Header: React.FunctionComponent = ({
  title,
  titleLink,
  tagline
}) => {
  const titleRef = React.useRef(null);
  const taglineRef = React.useRef(null);
  const propsTitle = useSpring({ ...transition, ref: titleRef });
  const propsTagline = useSpring({ ...transition, ref: taglineRef });
  useChain([titleRef, taglineRef], [0, 0.2]);

  return (
    <header>
      
      <div>
        <h1>
          
            {title}
          
        </h1>
        </div></header>