Search Bar Filter & Displaying of "No results found" alternative solution - react-hooks

Question

I am currently doing up a search bar, and wanted to display "No results found" if there is no match. Apart from using (searchResults.length > 0) as the condition to map out the results, I wanted to try another solution using React hooks state e.g. noResults instead, but I just keep getting an error - Uncaught TypeError: Cannot read properties of undefined (reading 'map').
//Search bar for first name
const [searchInput, setSearchInput] = useState("");
const [noResults, setNoResults] = useState(true);
const handleSearchName = ({ target }) => {
setSearchInput(target.value);
};
const searchResults =
searchInput !== ""
? nameList.filter((person) =>
person.firstName
?.toLowerCase()
.includes(searchInput.toLowerCase())
) && setNoResults(false)
: nameList;
<div className={styles["search-bar"]}>
<InputGroup>
<Button type="submit" className={styles["search-btn"]}>
<Search className={styles["search-icon"]} />
</Button>
<Form.Control
value={searchInput}
onChange={handleSearchName}
type="text"
placeholder="Search..."
className={styles["search-box"]}
/>
</InputGroup>
</div>
{noResults && searchResults.map((person, index) => (
<div key={index}>
<Card className={styles["person-card"]}>
<Card.Body>
<div className={styles["card-content"]}>
<div className={styles["person-info"]}>
<p>{person.firstName}</p>
</div>
</div>
</Card.Body>
</Card>
</div>
))}
{!noResults && <div>No results found.</div>}