Как правильно задать типы для React компонентов

У меня есть такой компонент Form https://take.ms/tvcF3, который состоит из двух более маленьких компонентов, компонента Input & Button https://take.ms/STLTb.

Код компонента Form выглядит так:

import { Button } from '../button/button';
import { Input, InputProps } from '../input/input';

export interface FormProps extends InputProps {
    buttonTitle?: string;
}

export function Form({ buttonTitle = 'Submit', ...args }: FormProps) {
    return (
        <form className="flex">
            <div className="min-w-0 flex-auto mr-4">
                <Input {...args} />
            </div>
            <Button size="sm" type="submit">
                {buttonTitle}
            </Button>
        </form>
    );
}

export default Form;

Вопрос, как мне правильно задать для компонента Form типы? По сути у меня в FormProps также должны быть и типы компонента Input, чтобы я мог передавать разные методы и свойства которые относятся к Input, по типу onChange и т.д. Но мне также нужны и типы правильные для самой формы, чтобы была возможность правильно использовать ее свойства и методы по-типу onSubmit и т.д.

Нужно делать что-то подобное?

export interface FormProps
    extends React.DetailedHTMLProps<
            React.FormHTMLAttributes<HTMLFormElement>,
            HTMLFormElement
        >,
        InputProps {
    buttonTitle?: string;
}

Но тогда TypeScript ругается https://take.ms/08W5J. Для Input у мена заданы такие типы:

export type InputProps = React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
>

Подскажите, пожалуйста, как в таких ситуациях лучше поступать.