fix: typescript legacyRef error function

src/sections/TestimonialsSection/TestimonialsSection.tsx

@@ -32,20 +32,14 @@ const testimonialsSrc: Omit<TestimonialItemProps, 'index'>[] = [
 
 export function TestimonialsSection() {
     const videosRef = useRef<Array<HTMLVideoElement>>([])
-    const newRef = useRef<HTMLVideoElement>(null)
 
     const settings: ComponentProps<typeof Slider> = {
         infinite: false,
         beforeChange(currentSlide: number, nextSlide: number) {
-            videosRef.current[currentSlide].pause();
+            videosRef!.current![currentSlide].pause();
         }
     }
 
-    const handlePause = () => {
-        console.log(newRef.current)
-        newRef!.current!.pause()
-    }
-
     return (
         <section className={styles.root}>
             <Container>

src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.tsx

@@ -8,7 +8,7 @@ export type TestimonialItemProps = {
     index: number
 };
 
-export const TestimonialItem = forwardRef((props: TestimonialItemProps, ref: Ref<HTMLVideoElement[] | null>) => {
+export const TestimonialItem = forwardRef((props: TestimonialItemProps, ref: Ref<HTMLVideoElement[]>) => {
     const {src, keyPhrase, clientName, index, ...otherProps} = props;
 
     if (typeof ref === 'function') {
@@ -18,7 +18,9 @@ export const TestimonialItem = forwardRef((props: TestimonialItemProps, ref: Ref
     return (
         <div {...otherProps}>
             <div className={styles.innerContainer}>
-                <video ref={el => ref!.current![index] = el!} className={styles.video} controls src={`${src}#t=0.1`} preload={"metadata"}/>
+                <video ref={el => {
+                    ref!.current![index] = el!
+                }} className={styles.video} controls src={`${src}#t=0.1`} preload={"metadata"}/>
                 <div className={styles.description}>
                     <p className={styles.keyPhrase}>{keyPhrase}</p>
                     <p className={styles.clientName}>{clientName}</p>