I have an Iterator component inside my app which iterates over a given set of items and prints them to the page. Usually, the component works just fine. However, I've encountered a weird issue with React, where - despite the child components being wrapped in a Fragment component, React will still throw unexpected token div.

const Iterator = ({ items, children, ...props }) => (
    <div {...props}>
        { items.map((data, key) => (
            <Fragment key={key}>
                { children(data, key) }
            </Fragment>
        ))}
    </div>
);

// This "parent" element is the one that throws the error. 
<div className={styles.parent}>
    <Iterator items={items} className={styles.child}>{itemValue => (
        <Fragment>
            { itemValue?.type === "a" && (
                // Conditionally render a
            )}
            { itemValue?.type === "b" && (
                // Conditionally render b
            )}
        </Fragment>
    )}</Iterator>
</div>

Only when I remove one of the itemValue?.type === ... blocks does the code render as expected.

I may be missing something, but I can't put my finger on it. What's wrong here?