How to use the @wordpress/compose.useReducedMotion function in @wordpress/compose

function useMovingAnimation( ref, isSelected, enableAnimation, triggerAnimationOnChange ) {
	const prefersReducedMotion = useReducedMotion() || ! enableAnimation;
	const [ triggeredAnimation, triggerAnimation ] = useReducer( counterReducer, 0 );
	const [ finishedAnimation, endAnimation ] = useReducer( counterReducer, 0 );
	const [ transform, setTransform ] = useState( { x: 0, y: 0 } );

	const previous = ref.current ? ref.current.getBoundingClientRect() : null;

	useLayoutEffect( () => {
		if ( triggeredAnimation ) {
			endAnimation();
		}
	}, [ triggeredAnimation ] );
	useLayoutEffect( () => {
		if ( prefersReducedMotion ) {
			return;
		}
		ref.current.style.transform = 'none';

function SnackbarList( { notices, className, children, onRemove = noop } ) {
	const isReducedMotion = useReducedMotion();
	const [ refMap ] = useState( () => new WeakMap() );
	const transitions = useTransition(
		notices,
		( notice ) => notice.id,
		{
			from: { opacity: 0, height: 0 },
			enter: ( item ) => async ( next ) => await next( { opacity: 1, height: refMap.get( item ).offsetHeight } ),
			leave: () => async ( next ) => {
				await next( { opacity: 0 } );
				await next( { height: 0 } );
			},
			immediate: isReducedMotion,
		}
	);

	className = classnames( 'components-snackbar-list', className );