reactjs - コールバック時に PrimeReact Autocomplete で completeMethod をトリガーする

Question

プライマーリアクトのオートコンプリート コンポーネントを使用しています。課題は、オプション配列をコンポーネントの読み込み時の状態に設定したくないということです。代わりに、ユーザーが最初の 3 文字を入力したときに API 呼び出しを起動し、応答をオプション配列として設定します (そうしないと、配列が大きくなる可能性があり、状態メモリを肥大化させたくないためです)。

const OriginAutocomplete = () => {

    const [origins, setOrigins] = useState([]);
    const [selectedOrigin, setSelectedOrigin] = useState(null);
    const [filteredOrigins, setFilteredOrigins] = useState([]);

    useEffect(() => {
        if (!selectedOrigin || selectedOrigin.length < 3) {
            setOrigins([]);
        }
        if (selectedOrigin && selectedOrigin.length === 3) {
            getOrigins(selectedOrigin).then(origins => {
                setOrigins([...origins]);
            });
        }
    }, [selectedOrigin, setOrigins]);

    const handleSelect = (e) => {
        //update store
    }

    const searchOrigin = (e) => {
        //filter logic based on e.query
    }

    return (
        <>
            <AutoComplete
                value={selectedOrigin}
                suggestions={ filteredOrigins }
                completeMethod={searchOrigin}
                field='code'
                onChange={(e) => { setSelectedOrigin(e.value) }}
                onSelect={(e) => { handleSelect(e) }}
                className={'form-control'}
                placeholder={'Origin'}
            />
        </>
    )
}

ここでの問題は、3 文字を入力すると呼び出しがトリガーされることですが、オプションは 4 文字目を入力したときにのみ表示されます。それは大丈夫だったでしょう.2文字を入力したときに呼び出しを開始するようにコードを変更しようとしました. しかし、これは API 呼び出しが完了した後に 3 番目の文字を入力した場合にのみ期待どおりに機能します。つまり、2 文字を入力し、呼び出しが完了するのを待ってから 3 番目の文字を入力します。

オプション配列が変更されたときにオプションを表示するにはどうすればよいですか?

コールバックでfilteredOriginsを設定してみました

            getOrigins(selectedOrigin).then(origins => {
                setOrigins([...origins]);
                setFilteredOrigins([...origins])
            });

しかし、どうやらうまくいかないようです。