在列表项中反应useRef undefined

Question

我正在构建一个带有钩子的自定义下拉列表，并且遇到了一个问题，其中从数组呈现的ref.current元素的li是undefined。但是，我的其他ref不是。我确定我做错了什么，只是似乎无法查明是丢失还是无法绑定.current属性。

我正在使用样式组件，因此使用了命名约定。

输入如何成功引用正确的jsx元素，但链接未定义？

我正在探索完全使用带有钩子的键盘导航的策略，因此，如果有任何建议，很高兴听到它们：D

const CustomDropdown({ handleCategoryClick, width }) => {
    const input = useRef();
    const link = useRef();

    useEffect(() => {
        input.current.focus();
    }, []);

    const toggleList = () => {
        if (isOpen) {
            setIsOpen(false);
            return;
        }
        setIsOpen(true);
        setOptions(dropdownOptions);
    };
return (
    return (
        <DDWrapper>
            <DropdownContainer>
                <InputContainer onClick={toggleList}>
                    <DropdownInput
                        ref={input}
                        name="customDropdown"
                        width={width}
                        isOpen={isOpen}
                        defaultValue={inputValue}
                        placeholder="Select a filter"
                    />
                </InputContainer>
            </DropdownContainer>
            {isOpen && (
                <DDList width={251} isOpen={isOpen} onClick={handleCategoryClick} role="navigation">
                    {options.map(({ label }, i) => (
                        <DDItem
                            id="item"
                            onKeyDown={handleKeyDown}
                            onClick={hideList}
                            data-value={label}
                            key={i}
                            width={width}
                            ref={link}
                        >
                            {label}
                        </DDItem>
                    ))}
                </DDList>
            )}
        </DDWrapper>
    );