fix: support react 19 types

Author: chenjiahan

src/hero/BackgroundStar.tsx

@@ -14,7 +14,7 @@ const BackgroundStar = ({
   pageY: number | null;
   size: number;
 }) => {
-  const ref = useRef<any>();
+  const ref = useRef<HTMLDivElement | null>(null);
   const [transformX, setTransformX] = useState<number>(0);
   const [transformY, setTransformY] = useState<number>(0);
   useEffect(() => {

src/hero/index.tsx

@@ -42,7 +42,7 @@ const positions = [
 ];
 
 const useMouseMove = () => {
-  const ref = useRef<any>();
+  const ref = useRef<HTMLElement | null>(null);
   const [pageX, setPageX] = useState<null | number>(null);
   const [pageY, setPageY] = useState<null | number>(null);
 

src/shared.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
 
 type LinkProps = {
   className: string;
@@ -7,7 +7,7 @@ type LinkProps = {
   style?: CSSProperties;
 };
 
-export type LinkComp = (props: LinkProps) => JSX.Element;
+export type LinkComp = (props: LinkProps) => ReactElement;
 
 /**
  * A backup link component, import { Link } from 'rspress/theme' to replace it

src/why-rspack/useCardAnimation.tsx

@@ -4,7 +4,7 @@ export const useCardAnimation = () => {
   const [pageX, setPageX] = useState<null | number>(null);
   const [pageY, setPageY] = useState<null | number>(null);
   const [isHovering, setIsHovering] = useState(false);
-  const ref = useRef<HTMLElement>();
+  const ref = useRef<HTMLElement | null>(null);
 
   const handleMove = ({ pageX, pageY }: { pageX: number; pageY: number }) => {
     setPageX(pageX);

src/why-rspack/useLottieAnimation.tsx

@@ -6,9 +6,9 @@ export const useLottieAnimation = (
   isHovering: boolean,
   lottieJsonData?: string,
 ) => {
-  const ref = useRef();
+  const ref = useRef<HTMLDivElement | null>(null);
 
-  const animationRef = useRef<AnimationItem>();
+  const animationRef = useRef<AnimationItem | null>(null);
 
   useEffect(() => {
     if (!ref.current) {