javascript - スクリプトにアクセスしようとすると、useEffect を使用して React プロジェクトで「TypeError: null のプロパティ 'classList' を読み取れません」というメッセージが表示されますか?

Question

React プロジェクトに useEffect を実装して、外部 JS ファイルを追加しようとしています。

これは現在の私の React コードで、コメントアウトされたリストがスクリプトからアクセスしようとしているものです。

import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import './HeroSec.css';
import '../script.js';

function HeroSec(){

    useEffect(() => {
        console.log('render');

        const script = document.createElement('script');

        script.src = "../script.js";
        script.async = true;
      
        document.body.appendChild(script);
      
        return () => {
          document.body.removeChild(script);
        }
    })

    return(
    <div className='hero-container'>

        <h1>Example Name </h1> 
        {/*
        <ul id="foo" class="hidden-text">
        <li> E </li>
        <li class="hidden">x</li>
        <li class="hidden">a</li>
        <li class="hidden">m</li>
        <li class="hidden">p</li>
        <li class="hidden">l</li>
        <li class="hidden">e</li>
        <li class="spaced">N</li>
        <li class="hidden">a</li>
        <li class="hidden">m</li>
        <li class="hidden">e</li>
        </ul>
        */}

これは、エラーが発生しているscript.jsファイルです。

const text = document.querySelector("#foo");
    setTimeout(() => {
        text.classList.toggle("hidden-text");
    }, 1000);

基本的に、React でそのリスト要素を取得し、スクリプトを使用してタイムアウトを設定し、隠しテキスト クラスをオフに切り替えようとしています。もちろん、これを個別に行う CSS もあります。

うまくいけば、私がやろうとしていることの全体像を簡単に理解できるようになりました。それに関する助けがあれば幸いです. 私が取得している特定の TypeError に関しては、classList の代わりに、React 内からリストにアクセスするために使用できる別のプロパティがありますか?