1. I am working on an PowerPoint add-in using office.js api and I am using React+Typescript. I have a translation api and I translate text from selected shapes and it’s working well but I want to translate the text from table cells but when I translate selected text from table cells it become a gathered string and all the text from other cells become one string and shows as output. I want to get text in one by one cells of table with flow.

useEffect(() => {
        const fetchLanguages = async () => {
            try {
                const [sourceLangData, targetLangData] = await Promise.all([
                     GetSourceLanguage(),
                    GetTargetLanguage()
                ]);
                setSourceLanguages(sourceLangData);
                setTargetLanguages(targetLangData);
           } catch (error) {
                console.error('Error fetching languages:', error);
            }
        };

        fetchLanguages();
    }, []);

    const handleFetchData = async (sourceLang, targetLang, text) => {
        setLoading(true);
        try {
            const translation = await fetchTranslation(sourceLang, targetLang, text);
            insertProcessedText(translation);
            // Reset dropdown values
            setSourceLanguage('');
            setTargetLanguage('');
        } catch (error) {
            console.error('Error during fetch operation:', error);
        } finally {
            setLoading(false);
        }
    };

    const handleGetSelection = () => {
        Getslectedbodytext((text: any) => {
            if (!text) {
                toast.error('No text selected!');
                return;
            }
            setSelectedText(text);
            handleFetchData(sourceLanguage, targetLanguage, text);
        });
    };