The component dot't render when it must be rendered - reactjs

Question

https://github.com/patr4519/githubUserInfo.git
The essence of the application:
In input entering logins of github users separated by commas, the app shows the result consisting of photo, user name and data reg. After entering the user (users) into the input and pressing the Enter button, an array with users in the form of objects gets into the users state, which are then used to display cards.
The problem is that the Main component is rendered only after the Enter button is pressed and some other action is performed, for example, pressing the Clear button or additional input in the input field, despite the fact that the users state is updated after pressing the Enter button. And in theory, there should be a rerender, which does not happen when it is necessary.
What could be the problem? I attach a link to the repository.
function App() {
return (
<div className='wrapper'>
<Nav />
<Header />
<Main />
</div>
);
}
function Main() {
const [users, setUsers] = React.useState([]);
const [searchValue, setSearchValue] = React.useState('');
const onChangeSearchValue = (event) => {
setSearchValue(event.target.value);
}
const addUsers = () => {
let arrOfJson = []
for (let user of searchValue.split(', ')) {
fetch(`https://api.github.com/users/${user}`)
.then(us => us.json())
.then((json) => arrOfJson.push(json))
.catch((err) => {
console.log(err);
})
}
setUsers(arrOfJson);
}
const clearInput = () => {
setSearchValue('')
}
return (
<div className='main'>
<InputForm addUsers={addUsers} onChangeSearchValue={onChangeSearchValue} clearInput={clearInput} />
<Users users={users} />
</div>
);
}
export default App;

Answer 1

The fetch is asynchronous so when you have setUsers after a loop inside addUsers, it stores an empty array actually because data hasn't been populated yet:
const addUsers = () => {
let arrOfJson = []
for (let user of searchValue.split(', ')) {
fetch(`https://api.github.com/users/${user}`)
.then(us => us.json())
.then((json) => arrOfJson.push(json))
.catch((err) => {
console.log(err);
})
}
setUsers(arrOfJson); // sets an empty array
}
You can fix with something like this:
const addUsers = async () => {
for (let user of searchValue.split(", ")) {
let resultJson = await fetch(`https://api.github.com/users/${user}`);
let result = await resultJson.json();
setUsers((ps) => [...ps, result]);
}
};