父组件每次点击如何确保子组件useEffect代码执行？

import react, { useref, forwardref } from "react";

export interface subcontainerref {
  scrollto(index: number): void;
}

export const subcontainer = forwardref<subcontainerref, subcontainerprops>(
  (props, ref) => {
    const scrollto = (scrolltoidx: number) => {
      const container = document.queryselector("#container");
      const div: htmldivelement | null = document.queryselector(
        "#item-" + scrolltoidx!.tostring()
      );

      console.log(container, div);
      if (container) {
        container.scrollto({
          top: div!.offsettop,
          behavior: "smooth",
        });
      }
    };

    useimperativehandle(
      ref,
      () => ({
        scrollto,
      }),
      []
    );

    // ... 其余代码
  }
);

import React, { useRef } from "react";

const App = () => {
  const conRef = useRef<SubContainerRef>();

  const btnClick = () => {
    conRef.current?.scrollTo(20);
  };

  return (
    <div>
      <SubContainer ref={conRef} {...props} />
      <button onClick={btnClick}>点击</button>
    </div>
  );
};

export default App;