Undefined Error while using RestApi jsonplaceholder - html

Question

I am using RestApi and trying to use fetch to jsonplaceholder but it shows undefined in the final result.
enter image description here
This is the code:
function searchUser(event) {
event.preventDefault();
const searched_random_users = random_users.filter((user) => user.email.includes(event.target.value));
products_container.innerHTML = '';
searched_random_users.forEach((random_user) => {
products_container.innerHTML += `
<div class="card col-4">
<h3 class="card-text">${random_user.name}</h3>
<h5 class="card-text">${random_user.username}</h5>
<h5 class="card-text">${random_user.email}</h5>
<h5 class="card-text">${random_user.phone}</h5>
</div>
`;
});
}
random_user_add_button.addEventListener('click', addRandomUser);
function addRandomUser(event) {
event.preventDefault();
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((user) => {
random_users.push(user);
products_container.innerHTML += `
<div class="card col-4">
<h3 class="card-text">${user.name}</h3>
<h5 class="card-text">${user.username}</h5>
<h5 class="card-text">${user.email}</h5>
<h5 class="card-text">${user.phone}</h5>
</div>
`;
});
}