How to use the @popmotion/easing.easeInOut function in @popmotion/easing

<figure>
			
			<figcaption>
				{progressable(
					Built for all screen sizes,
					switchProgress(4, props.page, easeOut(props.progress))
				)}
				{progressable(
					
						React Overscroll relies on the viewport and therefore ensures responsive
						behavior.
						<br>
						Add your own logic to define how to display the content on different screen
						sizes
					,
					switchProgress(3, props.page, easeInOut(props.progress))
				)}
			</figcaption>
		</figure>
	);
};

return (
		<figure>
			
			<figcaption>
				{progressable(
					Built for all screen sizes,
					switchProgress(4, props.pageIndex, easeOut(props.progress))
				)}
				{progressable(
					
						Stickyroll relies on the viewport and therefore ensures responsive behavior.
						<br>
						Add your own logic to define how to display the content on different screen
						sizes
					,
					switchProgress(3, props.pageIndex, easeInOut(props.progress))
				)}
			</figcaption>
		</figure>
	);
};

const easeFast = (x: number) =>
    easeInOut(
      Number(interpolate([1 - delaysRatio, 1], [0, 1])(halfClampEnd(x))),
    );

{progressable(
					
						Stickyroll relies on the viewport and therefore ensures responsive behavior.
						<br>
						Add your own logic to define how to display the content on different screen
						sizes
						
							<button href="{">
								Show me how
							</button>
						
					,
					switchProgress(3, props.pageIndex, easeInOut(props.progress))
				)}
			
		
	);
};

var easeFast = function (x) {
        return easing_1.easeInOut(Number(popcorn_1.interpolate([1 - delaysRatio, 1], [0, 1])(halfClampEnd(x))));
    };
    var spring = new wobble_1.Spring(__assign({ fromValue: Number(isInitial), toValue: Number(!isInitial) }, options.spring));