Why is the map method returning my array as undefined?

Why does the error message appear TypeError: can't access property "map", headers is undefined?

I have defined headers inside a state variable, passed it as props and used it inside a component so has been declared every step of the way.

I don't understand why I am getting this error message.

import { useState } from "preact/hooks"; export function Transcription() { const [active, setActive] = useState("B"); const [isOpen, setIsOpen] = useState(true); const [clickedHeader, setClickedHeader] = useState(0); const [headers, setHeaders] = useState( Array.from({ length: 10 }, (x, i) => i + 1), ); const removeHeader = function (e) { e.preventDefault(); setClickedHeader(+e.target.id); // [1,2,3,4,5,6,7] setHeaders(function (headers) { headers.slice().filter((x, i) => x !== clickedHeader); return; }); return; }; return ( <div> <TableHeader clickedHeader={clickedHeader} setClickedHeader={setClickedHeader} removeHeader={removeHeader} headers={headers} setHeaders={setHeaders} isOpen={isOpen} /> </div> ); } export function TableHeader({ clickedHeader, setClickedHeader, removeHeader, headers, setHeaders, isOpen, }) { return ( <div> {" "} <table className="table"> <thead> <tr> {headers.map((header, i) => ( <th value={header} id={header} key={header} style={styles.th} style={{ padding: "10px 20px", }} > <span style={{ display: "flex", justifyContent: "space-between", }} > Header {i + 1} <a key={i + 1} value={header} id={header} href="#" type="button" style={{ width: "1rem", height: "1rem", // padding: "4px", textDecoration: "none", }} onClick={(e) => removeHeader(e)} > ❌ </a> </span> </th> ))} </tr> </thead> <tbody> <tr> {headers.map(function (header, i) { return <TableCell id={header} key={header} />; })} </tr> </tbody> </table> </div> ); } function TableCell() { return ( <td // key={i + 1} style={styles.td} > <input type="text" style={styles.input} /> </td> ); }