Fluent ui Dropdown Still holding Selected value even my array and selected state are empty

I am working on word addin . i am using react framework using youman genrator. I have dropdowns that get data from an api . i am saveing this data in state .and use this state for showing dropdown options . if i select an option and after some process i am clearing this state as null . and now the dropdown still have previos memory . also state null.

this is dropdown

<div className={styles.dropDown}>
                    <Dropdown className={styles.dropDownMenu} value={Selected_ClauseId} placeholder="Clauses">
                        {ClauseRes.map((Clause, index) => (
                            <Option value={Clause}
                                onClick={() => {
                                    setSelected_ClauseId(Clause.id);
                                }}
                                key={index}
                            >
                                {Clause.title}
                            </Option>
                        ))}
                    </Dropdown>
                </div>

and my usestate

    const [ClauseRes, setClauseRes] = useState<any[]>([]); // Initialize as an array

i am saveing value in state :

 useEffect(() => {
        if (!SelectedClsCatagoryeId) return;

        const getSelectedClauseRes = async () => {
            setLoading(true)
            try {
                const response = await selectedClauseIdApi(SelectedClsCatagoryeId);

                // If the response is wrapped in an object like response.data.clauses
                const ClauseResult = response?.clauses || [];

                setClauseRes(ClauseResult);
                console.log(ClauseResult);
            } catch (error) {
                console.error("Error fetching ClauseResult", error);
                setClauseRes([]); // Handle error by defaulting to an empty array
                setLoading(false)
            } finally {
                setLoading(false)
            }
        };

        getSelectedClauseRes();
    }, [SelectedClsCatagoryeId]);

also after some process clearing on click of button

  const handleClearSearchAllClauses = () =>{
        setSelectedClauses([]);
        setFilteredClauses([]);
        setSearchInput("");
        setclauseContent("");
        setclauseHeading("");
        setSelected_ClauseId(null)
    }

please give me cutting solution .