Невозможно передать реквизиты, такие как 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 {};