Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'childNodes')

*I am having a problem with Vanta.js importing the Globe Example TypeError: Cannot read properties of null (reading 'childNodes') please help me with this I don't know what I am doing wrong
*

import * as THREE from 'three';
import GLOBE from 'vanta/dist/vanta.globe.min.js';
// import "../css/skin/skin-1.css";

function Index2() {
    const [vantaEffect, setVantaEffect] = useState(0);

    const vantaRef = useRef(null);
    useEffect(() => {
        if (!vantaEffect) {
            setVantaEffect(
                GLOBE({
                    el: vantaRef.current,
                    THREE,
                })
            );
        }
        return () => {
            if (vantaEffect) vantaEffect.distroy();
        };
    }, [vantaEffect]);