Today I am faced with a really strange issue and I can not solve it. I am using react query to fetch data for my Combobox.

const { isLoading, data } = useQuery('loadBranchBICRMA', loadBranchBIC)

and I am using form.watch for catching if there are any changes occurring in my Combobox because if there are some changes occurring I will check my DB and fill the rest of the form if there is a match.

const receiverBIC = form.watch('ReceiverBIC');
const senderBIC = form.watch("SenderBIC") ;
const [branchColumns] = React.useState(['none']);
const [messageTypeColumns] = React.useState(['accptdMsg','declndMsg']);

const validateRMA = () => {
    const URL = VALIDATE_RMA + `/${senderBIC}/${receiverBIC?.length === 8 ? receiverBIC+"XXX": receiverBIC}`
    axios.get(URL, {httpsAgent})
        .then((response) => {
            if (response.data !== ''){
                setSelectedAcceptedMessages(response.data.accptdMsg);
                setSelectedDeclinedMessages(response.data.declndMsg);
                setIsSave(true)
            }else setIsSave(false);
        }).catch();
}

useEffect(() => {if ( receiverBIC?.length !== 0 ) {validateRMA();}}, [receiverBIC,senderBIC]);

The problem is if there are less than 2 elements in my Combobox, form.watch rerender and crash my app. The strange part is why 2 elements :D any help will save me thx.