我遵循了下面的文本显示动画教程，并试图在Next.Js上反映出来。但它给我错误消息说“TypeError：无法读取null的属性（阅读'textContent'）”
视频链接：https://www.youtube.com/watch?v=_0yjWtaajgw
TypeError: Cannot read properties of null (reading 'textContent')

'use client';

import { useState, useRef, useEffect } from "react";

import styles from './title.module.css';

import anime from "animejs";

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

export default function Title() {

useEffect(() => {

    textWrapper = document.querySelector(`.${styles.title}`);
    textWrapper.innerHTML = textWrapper.textContent.replace(
        /\S/g,
        "<span className={styles.letter}>$&</span>"
    );

    anime.timeline().add({
        targets: ".${styles.title} .${styles.letter}",
        translateY: [-200, 0],
        easing: "easeOutExpo",
        duration: 1500,
    });
  

}, [])

    return (
        <section>
            <h1 className={styles.title}>Web Designer</h1>
        </section>
    )
}

我尝试添加useReff，但似乎不起作用。