Generic Parent ignores Generic children React

First, here's my "Parent Component" or "Factory", I'm not quite certain what the terminology is.

export interface ReadOnlyProps {
    ignoreReadOnly?: boolean;
    disabled?: boolean;
}

export const WithReadOnly = <T,>(Component: React.ComponentType<T>): React.ComponentType<T & ReadOnlyProps> => {
    const ReadOnlyComponent = (props: T) => {
        const { ...rest } = props as T & ReadOnlyProps;
        return <Component {...(rest as T)} disabled={true} />;
    };

    return ReadOnlyComponent;
};

Here are the components I did for this:

const Dropdown = <T,>(props: { items: T[]; onChange: (data: T) => void }) => {
    return (
        <ul>
            {props.items.map((item, index) => {
                <li onClick={() => props.onChange(item)}>{index}</li>;
            })}
        </ul>
    );
};

const DropdownReadOnly = WithReadOnly(Dropdown);

Then I did this two examples.

// Works
<Dropdown items={[{ name: 'Someone' }, { name: 'Someone else' }]} onChange={(item) => alert(item.name)} />;

// Doesn't work
<DropdownReadOnly items={[{ name: 'Someone' }, { name: 'Someone else' }]} onChange={(item) => alert(item.name)} />;

The first one is working, the second one is complaining that item is unknown on the onChange prop.

Anyone know what I am doing wrong here?

Thank you beforehand!