I got stuck on iteration, it shows result perfect but when I render on the component level on load it loads on the same field but last object on

Question

I got stuck in rendering component level on load. When I click edit and call edit function, it loads data properly in console and show all objects but it doesn't render on the page level.

Here is my code:

const handleEdit = async () => {
    const { searchBrand } = await searchBrandAPI({ id });
    searchBrand[0].translations.forEach(arrVal => {
        console.log(arrVal, 'arrVal');
        setDynamicValues([ ...dynamicValues, {
                transLanguage: { label: arrVal.language, value: arrVal.languauge },
                transName: arrVal.name,
                transIsActive: { label: formatFirstCharUpperCase(arrVal.isActive, String), value: arrVal.isActive },
        }]);
    }); 
    const strIsActive = { label: formatFirstCharUpperCase(searchBrand[0].isActive, String), value: searchBrand[0].isActive }
    setValues({ name: searchBrand[0].name, isActive: strIsActive })
}

Answer 1

I resolved it this way.

const handleEdit = async () => {
    const { searchBrand } = await searchBrandAPI({ id });
    const transData = [];
    searchBrand[0].translations.forEach(arrVal => {
        transData.push({
            transLanguage: { label: arrVal.language, value: arrVal.languauge },
            transName: arrVal.name,
            transIsActive: { label: formatFirstCharUpperCase(arrVal.isActive, String), value: arrVal.isActive },
        });
    });
    setDynamicValues(transData);
    const strIsActive = { label: formatFirstCharUpperCase(searchBrand[0].isActive, String), value: searchBrand[0].isActive }
    setValues({ name: searchBrand[0].name, isActive: strIsActive })
}

Is this the right way? because I tried memo as well as callback but same thing was showing like last record only even on console it was showing perfect! Please confirm, if I did this in a right way or is there any other shortest way to solve this?