Cannot read property 'map' of undefined react 17 - reactjs

Question

Currently, I started learning to react in the Udemy course "react-for-the-rest-of-us".
now, I'm trying to approach the state hook from the child component, and I get the above error.
my target is to add another element to the state by getting it's values from the user input
this is the parent component:
import React, { useState } from "react";
import AddPetForm from "./FormPet";
function Header(props) {
const [pets, setPets] = useState([
{ name: "Meowsalot", species: "cat", age: "5", id: 123456789 },
{ name: "Barksalot", species: "dog", age: "3", id: 987654321 },
{ name: "Fluffy", species: "rabbit", age: "2", id: 123123123 },
{ name: "Purrsloud", species: "cat", age: "1", id: 456456456 },
{ name: "Paws", species: "dog", age: "6", id: 789789789 },
]);
const pet = pets.map((pet) => (
<Pet name={pet.name} species={pet.species} age={pet.age} id={pet.id} />
));
return (
<div>
<LikedArea />
<TimeArea />
<ul>{pet}</ul>
<AddPetForm set={setPets} />
</div>
);
}
function Pet(props) {
return (
<li>
{props.name}is a {props.species} and is {props.age} years old
</li>
);
}
and this is the child component:
import React, { useState } from "react";
function AddPetForm(props) {
const [name, setName] = useState();
const [species, setSpecies] = useState();
const [age, setAge] = useState();
console.log(props.set);
function handleSubmit(e) {
e.preventDefault();
props.set((prev) => {
prev.concat({ name: name, species: species, age: age, id: Date.now() });
setName("");
setSpecies("");
setAge("");
});
}
return (
<form onSubmit={handleSubmit}>
<fieldset>
<legend>Add New Pet</legend>
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name"
/>
<input
value={species}
onChange={(e) => setSpecies(e.target.value)}
placeholder="species"
/>
<input
value={age}
onChange={(e) => setAge(e.target.value)}
placeholder="age in years"
/>
<button className="add-pet">Add Pet</button>
</fieldset>
</form>
);
}
export default AddPetForm;

Answer 1

You aren't returning the new concatenated array. So when you call props.set it should be this:
props.set((prev) => {
setName("");
setSpecies("");
setAge("");
return prev.concat({ name: name, species: species, age: age, id: Date.now() });
});
If you don't return anything, then technically the return value is undefined, so that's what it sets the state to. Then you get the error when you try to .map it