Невозможно передать реквизиты, такие как className или style, в реквизиты пользовательских компонентов

Я работаю над созданием пакета NPM, дружественного к TypeScript, но у меня возникают проблемы с передачей общих атрибутов HTML в качестве реквизитов, таких как className и style, в мой компонент. Я надеялся, что мне не придется вручную добавлять каждый атрибут в список реквизитов, расширив интерфейс всеми нужными реквизитами. Мой упрощенный компонент выглядит так:

import React, { Key, ReactElement } from "react";

interface MyComponentProps extends React.HTMLAttributes<HTMLDivElement> {
    customText: string;
    uniqueKey?: Key;
}

export function MyComponent({uniqueKey, customText, ...props}: MyComponentProps): ReactElement {
    return (
        <div key = {uniqueKey} {...props}>{customText}</div>
    );
}

Я создал реквизит uniqueKey, так как его нельзя назвать просто key (то же самое с ref). Я попытался расширить параметр props, чтобы передать произвольные реквизиты моему компоненту, но, похоже, это не имеет значения. Я импортирую этот компонент в свой проект и пытаюсь вызвать его так:

<MyComponent customText = "Hello World" uniqueKey = {123} className = "myClass" />

Я получаю сообщение об ошибке: Property 'className' does not exist on type 'MyComponentProps'.

Я надеялся, что это сработает, так как MyComponentProps расширяет HTMLAttributes, у которого есть реквизиты, которые я хочу, такие как className и style.

Мой файл index.d.ts выглядит так:

import React, { Key, ReactElement } from "react";
interface MyComponentProps extends React.HTMLAttributes<HTMLDivElement> {
    customText: string;
    uniqueKey?: Key;
}
export declare function MyComponent({ uniqueKey, customText, ...props }: MyComponentProps): ReactElement;
export {};