React: scrollIntoView not working following by dependency of useEffect

I have got a dependency imageNo in useEffect() as I want the element to go up when it's being hidden, but scrollIntoView() does not work properly whenever imageNo changes, but it works when clicking a button.

Updated

import React, { useEffect, useRef, useState } from 'react';

const Product = ({ product }) => {
  const moveRef = useRef(product.galleryImages.edges.map(() => React.createRef()));
  const [imageNo, setImageNo] = useState(0);

  useEffect(() => {
    const position = moveRef.current[imageNo]?.current.getBoundingClientRect().y;

    console.log('imageNo', imageNo); // <<<<----- This is also called whenever scrolling excutes.

    if (position > 560) {
      moveRef.current[imageNo]?.current.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
    }
  }, [imageNo]);

  const test = () => {
    const position = moveRef.current[imageNo]?.current.getBoundingClientRect().y;

    if (position > 560) {
      moveRef.current[imageNo]?.current.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
    }
  };

  // This changes `imageNo`
  const handleScroll = () => {
    let id = 0;

    console.log('refs.current[id]?.current?.getBoundingClientRect().y', refs.current[id]?.current?.getBoundingClientRect().y);
    const temp = imgArr?.find((el, id) => refs.current[id]?.current?.getBoundingClientRect().y >= 78);

    if (!temp) id = 0;
    else id = temp.id;

    if (refs.current[id]?.current?.getBoundingClientRect().y >= 78) {
      setImageNo(id);
    }
  };


  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);


  return (
      <div className="flex flex-row layout-width ">
        {/* aside */}
        <div className="sticky flex self-start top-[76px] overflow-y-auto !min-w-[110px] max-h-[90vh]">
          <div className="">
            {product.galleryImages.edges.map((image, i) => {
              return (
                <div ref={moveRef.current[i]} key={image.node.id}>
                    <Image />
                </div>
              );
            })}
          </div>
        </div>
        <button onClick={test}>btn</button>
      </div>
  );
};

export default Product;

Any suggestion will be greatly appreciated.