Warning: Cannot update a component (`Conversation`) while rendering a different component (`FileUpload`)

I can store file uploadFileIds in an array and send to conversation.jsx component sometimes I received this error:

Sometimes it's working accurately but sometimes it's send a warning

Hera is my both component code:

FileUpload.jsx

const handleUpload = async () => {
        setError(null); // Reset error state
        let newUploadFileId;

        if (selectedFile) {
            try {
                const response = await fetch(UPLOAD_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                        'Authorization': getAuthHeader(),
                    },
                    body: `size=${selectedFile.size}`,
                    signal: abortController.signal,
                });

                const responseData = await response.json();
                const chunk_size = responseData.chunk_size;

                if (selectedFile.size <= 5 * 1024 * 1024) {
                    newUploadFileId = await uploadFilePart(selectedFile, responseData, accessToken.decrypted_access_token);
                } else {
                    const totalChunks = Math.ceil(selectedFile.size / chunk_size);
                    setTargetPercentage(totalChunks);
                    newUploadFileId = await uploadChunks(selectedFile, responseData, accessToken.decrypted_access_token);
                }

                if (newUploadFileId) {
                    // Delay the state update to avoid the React warning
                        setUploadFileIds(prevIds => {
                            const updatedIds = [...prevIds, newUploadFileId];
                            onUploadComplete(updatedIds);
                            return updatedIds;
                        });
                        setShowUploadingMessage(false);
                        setDynamicFileNo(prevCount => prevCount + 1);
                        setTargetPercentage(100);
                }
            } catch (error) {
                setError(error.message);
            }
        } else {
            console.log("Please select a file");
        }
    };

Conversation.jsx

<FileUpload
      selectedFile={selectedFile}
      isUploading={isUploading}
      onUploadComplete={handleUploadFileIds}
      abortController={abortControllerRef.current}
      onError={handleError} // Pass the handleError function
/>


// Function for get ids  
const handleUploadFileIds = (ids) => {
    console.log(ids);
    if (ids) {
        setUploadFileIds(ids);
        setIsSendButtonDisabled(false); // Re-enable the send button
        setIsUploading(false);
    }
};

How can I fix this issue