TypeScript: Type must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)

Question

I reviewed the other questions with a similar title, but cannot apply those solutions to this question. Please do not mark this question a duplicate without explaining in detail how the other answer applies here.

Goal is to allow deletion of several PDF files at once by returning an array of objects with each PDF-to-be-deleted as an object in the array.

The list of PDF files is passed in as a string via the Props (rowData) and converted to an object in useEffect.

interface TableRowData {
  id: number;
  name: string;
  pdf: string;  // "['bob.pdf', 'sam.pdf', 'art.pdf']"
}
interface ObjPdfsToRemove {
    pdfs2EditType: string;
    catSubcatId: number;
    pdf2del: string;
}
interface DlgEditSubcatPdfsProps {
  rowData: TableRowData;
  onClose(): void;
    pdfs2EditType: string;
}

export const DlgEditSubcatPDFs: FunctionalComponent<DlgEditSubcatPdfsProps> = ({ rowData, pdfs2EditType, onClose }) => {

const [currRowData, setCurrRowData] = useState<TableRowData>(rowData);
const [arrPdfNames, setArrPdfNames] = useState([]);
const [pdfs2Remove, setPdfs2Remove] = useState<ObjPdfsToRemove[] | undefined>(undefined);

useEffect(() => {
    setCurrRowData(rowData);
    setArrPdfNames(JSON.parse(rowData.pdf));
}, [rowData]);

The PDFs are displayed on screen like this:

<div class={style.fileList}>
    {arrPdfNames !== undefined && arrPdfNames?.map((d) => {
        return (
            <div class={style.pdfsFlexRow}>
                <Button className={style.pdfDelBtn} onClick={() => handleDelPdf(d)}>
                    DEL
                </Button>
                <div class={style.pdfFileName}>{d}</div>
            </div>
        );
    })}
</div>

When the Del button is clicked:

const handleDelPdf = (pdf2del: string) => {
    setPdfs2Remove(pdfs2Remove !== undefined => [...pdfs2Remove, {  //ADDED per VLAZ suggestion (pretty sure my syntax incorrect)
        pdfs2EditType: pdfs2EditType,
        catSubcatId: rowData.id,
        pdf2del: pdf2del,
    }]);
};

THE ERROR is in handleDelPdf (immediately above), on this line:
setPdfs2Remove(pdfs2Remove => [...pdfs2Remove, {
^^^^^^^^^^^^^^

When hover the ...pdfs2Remove, the TS Error reads:

Type 'ObjPdfsToRemove[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)
-----
(parameter) pdfs2Remove: ObjPdfsToRemove[] | undefined

How to fix this error?

Updates:

1. Added IF condition if (pdfs2Remove !== undefined) to the handleDelPdf function, but error remained the same.

Initially added the conditional test like this:

    if setPdfs2Remove(pdfs2Remove !== undefined){ //--------------------- ADDED (same error)
        setPdfs2Remove(pdfs2Remove => [...pdfs2Remove, {
            pdfs2EditType: pdfs2EditType,
            catSubcatId: rowData.id,
            pdf2del: pdf2del,
        }]);
    };  //--------------------------------------------------------------- ADDED (same error)

2. Removed (1) above and changed the setPdfs2Remove() func itself, like this (this is how the code is now displayed in the original question):

setPdfs2Remove(pdfs2Remove !== undefined => {

but that's not right either.