// src/components/Services.js
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useScroll, useTransform } from 'framer-motion';
import OnScreen from '../hooks/OnScreen';

/*section#services .services-section {
	position: relative;
	width: 100%;
	overflow: hidden;
}
section#services .services-section .overlay {
	z-index: 2;
}
section#services .services-section .underlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	display: flex;
	justify-content: center;
	align-items: center;
}
section#services .services-section .overlay img,
section#services .services-section .underlay img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}*/

const imagesUnderlay = [
	`${process.env.PUBLIC_URL}/img/agency-05a1.png`,
	`${process.env.PUBLIC_URL}/img/agency-05a2.png`,
	`${process.env.PUBLIC_URL}/img/agency-05a3.png`,
];

const Services = () => {
	
	const servicesImage = `${process.env.PUBLIC_URL}/img/agency-05a.png`;
	
	const [currentImg, setCurrentImg] = useState(0);
	const [ref, isVisible] = OnScreen();
	const { scrollY } = useScroll();
	// Transform scroll Y to change the index of the image to display
	const imageIndex = useTransform(scrollY, [0, window.innerHeight], [0, imagesUnderlay.length]);
	
	useEffect(() => {
		return imageIndex.onChange((latest) => {
			if (isVisible) {
			
				const newIndex = Math.round(latest);
				// Prevent going beyond the last index
				setCurrentImg(Math.min(newIndex, imagesUnderlay.length - 1)); 
			}
		});
	}, [imageIndex, isVisible]);// add isVisible to dependencies to ensure the effect runs when visibility changes
	
	return (
		<div className="container-fluid services-section" ref={ref}>
			<div class="overlay">
				<img src={servicesImage} alt="services" class="img-fluid" />
			</div>
			<div class="underlay">
				<motion.img 
					src={imagesUnderlay[currentImg]} 
					alt={`image ${currentImg + 1}`}
					initial={{ opacity: 1 }}
					animate={{ opacity: 1 }}
					transition={{ duration: 0.8, ease: "easeInOut" }} 
				/>
			</div>
		</div>
	);
};

export default Services;


I have this code.. it works fine. but i want the images to blur out and in when the user scrolls and the images switch. Do not change the css, its their for you to understand. I also use my custom OnScreen.js, here the code for it:

// src/hooks/useOnScreen.js
import { useEffect, useRef, useState } from 'react';

/**
* Hook to determine if the component is currently visible in the viewport.
* @param {object} options - Options to configure the IntersectionObserver.
* @returns {[ref, isVisible]} - A ref to attach to the component and the visibility state.
*/
const OnScreen = (options) => {

	const ref = useRef(null);
	const [isVisible, setIsVisible] = useState(false);
	
	useEffect(() => {
		const observer = new IntersectionObserver(([entry]) => {
		
			// Check if the element is in the viewport
			if (entry.isIntersecting) {
					
				setIsVisible(true);
					
				// Stop observing after the first intersection if desired
				observer.unobserve(entry.target);
			}
		}, options);
		
		const currentRef = ref.current;
		
		// Observe the current DOM node if it exists
		if (currentRef) {
			observer.observe(currentRef);
		}
		
		// Cleanup function to unobserve the element
		return () => {
			if (currentRef) {
				observer.unobserve(currentRef);
			}
		};
	}, [options]);// Dependency array should not include `ref` as it's a constant
	
	return [ref, isVisible];
};

export default OnScreen;

please help with creating this blur effect