React map not rendering array - reactjs

Question

After obtaining a data, I take a photo of the user from the users table with the user's ids, I can access all the data without any problem and I can see all of them with console.log. But it doesn't render.
How can i solve this problem ? Thank you.
export default function MentionInput(props) {
const [state, dispatch] = useContext(UsePeopleModuleContext);
const [decisionUserRole, setDecisionUserRole] = useContext(
UseDecisionUserRoleContext
);
const { isConsulted, isResponsible, isApprover, isCreator } =
decisionUserRole;
const { currentUser } = useAuth();
const { users, currentWorkspace, activeDecision, setActiveDecision } =
useWorkspace();
const [value, setValue] = useState([]);
const [loading, setLoading] = useState(true);
const userMentionData = users.map((myUser) => ({
id: myUser.userId,
value: myUser.userId,
displayName: `${myUser.displayName}`,
label: `${myUser.displayName}`,
}));
const propsData = props;
useEffect(async () => {
setLoading(true);
const people = await usersModule.getPeople(
currentWorkspace,
activeDecision.id
);
const datas = [];
if (propsData.field === 'consulted') {
people.consulted.map((consulted) => {
console.log('CONSULTED =>', consulted);
userdb.getUser(consulted.id).then((user) => {
const photoURL = user.photoURL;
datas.push({
id: consulted.id,
value: consulted.id,
displayName: `${user.displayName}`,
label: `${user.displayName}`,
photoURL: photoURL !== undefined ? photoURL : '',
});
});
});
console.log('DATAS =>', datas);
setValue(datas);
setLoading(false);
} else if (propsData.field === 'approver') {
const user = await userdb.getUser(people.approver.id);
const photoURL = user.photoURL;
setValue([{ ...people.approver, photoURL: photoURL }]);
setLoading(false);
} else if (propsData.field === 'responsible') {
//await userdb.getUser
const user = await userdb.getUser(people.responsible.id);
const photoURL = user.photoURL;
setValue([{ ...people.responsible, photoURL: photoURL }]);
setLoading(false);
}
}, []);
return (
!loading &&
(isCreator || !isResponsible ? (
<Box w="100%">
<Select
isMulti={
props.field === 'consulted'
? true
: props.field === 'approver'
? false
: props.field === 'responsible'
? false
: true
}
name=""
options={userMentionData}
placeholder="Assign people"
closeMenuOnSelect={false}
size="sm"
onChange={handleChange}
value={value}
/>
</Box>
) : (
<Box w="100%" ml="10px">
<Wrap>
{value?.map((item, index) =>
item !== undefined ? (
<WrapItem key={index}>
<Tag
size="md"
borderRadius="lg"
ml={index === 0 ? 0 : 2}
colorScheme="gray"
>
<Avatar
size="xs"
name={
item?.displayName !== undefined &&
item?.displayName.toLowerCase()
}
ml={-3}
mr={2}
src={item.photoURL}
/>
<TagLabel>{item?.displayName}</TagLabel>
</Tag>
</WrapItem>
) : null
)}
</Wrap>
</Box>
))
);
}
userdb.getUser: it works beautifully.
getUser: async (userId) => {
const q = query(doc(db, 'user', userId));
const getData = await getDoc(q);
if (getData.exists()) {
return getData.data();
}
},
As you can see from the screenshots, the data comes out fine, but the component does not render.

Answer 1

i update my setState function , the question solved.
if (propsData.field === 'consulted') {
const datas = [];
people.consulted.map((consulted) => {
userdb.getUser(consulted.id).then((user) => {
const photoURL = user.photoURL;
setValue((value) => [
...value,
{
id: consulted.id,
value: consulted.id,
displayName: `${user.displayName}`,
label: `${user.displayName}`,
photoURL: photoURL !== undefined ? photoURL : '',
},
]);
});
});
setLoading(false);
}