有谁知道这个组件可能出了什么问题吗？

import { useEffect, useRef } from 'react'
import React from 'react';

const ModalShop = ({ isVisible, onClose }) => {

    if (!isVisible) return null;

    const handleClose = (e) => {
        if (e.target.id === 'wrapper') { onClose(); }
    }

    const inputRef = useRef(null);
    const spanRef = useRef(null);

    useEffect(() => {
        const input = inputRef.current;
        const span = spanRef.current;

        const handleInput = () => {
            if (input.value.trim() !== '') {
                span.classList.add('text-green-800', 'bg-slate-300', 'transform', '-translate-y-4', '-translate-x-0', 'text-sm', 'mx-4', 'px-1');
            } else {
                span.classList.remove('text-green-800', 'bg-slate-300', 'transform', '-translate-y-4', '-translate-x-0', 'text-sm', 'mx-4', 'px-1');
            }
        };

        input.addEventListener('input', handleInput);

        return () => {
            input.removeEventListener('input', handleInput);
        };

    }, []);
    

    return (
        <div className='fixed inset-0 right-30 bg-black
            bg-opacity-25 backdrop-blur-sm flex
            justify-center items-center z-30'
            onClick={handleClose}
            id='wrapper'
        >
            <div className='w-[300px] px-5 sm:w-[600px] sm:px-0 flex flex-col z-40'>
                <button className='text-white text-xl
                    place-self-end'
                    onClick={() => onClose()}
                >
                    x
                </button>
                <div className='bg-slate-300 p-2 rounded h-[300px] w-[auto] flex items-center'>
                    <label className='relative'>
                        <input type='text' className='h-[40px] w-[250px]
                            text-lg bg-slate-300 border-2 rounded-r-3xl
                            border-gray-600 outline-none
                            focus:border-green-800 focus:text-black
                            transition duration-200 px-2'
                            id="nombreCompleto" ref={inputRef}
                        />
                        <span className='text-lg text-gray-600 input-text
                            absolute left-0 top-2 mx-2 px-2' id="nombreCompletoLabel"
                            ref={spanRef}
                        >
                            Put Your Name Here
                        </span>
                    </label>
                </div>
            </div>
        </div>
    )
}

export default ModalShop;

字符串
执行组件时，将引发此警告
警告：内部React错误：预期的静态标志丢失。请通知React团队。ModalShop@webpack-internal：/（app-pages-browser）/./src/app/components/ModalShop.jsx：10：34 section Price@webpack-internal：/（app-pages-browser）/./src/app/sections/Price.jsx：31：86 Suspense div InnerLayoutRouter@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/layout-router.js：241：18 RedirectErrorBoundary@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/redirect-boundary.js：72：9 RedirectBoundary@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/redirect-boundary.js：80：24 NotFoundErrorBoundary@webpack-internal：///（app-pages-browser）/./node_modules/next/dist/client/components/not-found-boundary.js：54：9 NotFoundBoundary@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/not-found-boundary.js：62：62 LoadingBoundary@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/layout-router.js：315：76 ErrorBoundary@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/error-boundary.js：130：67 InnerScrollAndFocusInt @webpack-internal：///（app-pages-browser）/./node_modules/next/dist/client/components/layout-router.js：151：9 ScrollAndFocuscode @webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/layout-router.js：226：37 RenderFromTemplateContext@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/render-from-template-context.js：15：44 OuterLayoutRouter@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/layout-router.js：325：209 body html RedirectErrorBoundary@webpack-internal：///（app-pages-browser）/./node_modules/next/dist/client/components/redirect-boundary.js：72：9 RedirectBoundary@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/redirect-boundary.js：80：24 NotFoundErrorBoundary@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/not-found-boundary.js：54：9 NotFoundBoundary@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/not-found-boundary.js：62：62 DevRootNotFoundBoundary@webpack-internal：///（app-pages-browser）/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js：32：24 ReactDevOverlay@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js：66：9 Hotspreadad @webpack-internal：///（app-pages-browser）/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js：295：37 Router@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/app-router.js：159：100 ErrorBoundaryNode @webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/error-boundary.js：100：9 ErrorBoundary@webpack-internal：/（app-pages-browser）/./node_modules/next/dist/client/components/error-boundary.js：130：67 AppRouter@webpack-internal：///（app-pages-browser）/./node_modules/next/dist/client/components/app-router.js：436：47 ServerRoot@webpack-internal：///（app-pages-browser）/./node_modules/next/dist/client/app-index.js：128：24 RSC组件根@webpack-internal：///（app-pages-browser）/./node_modules/next/dist/client/app-index.js：144：24