me sale este error:

React no reconoce la propiedad buttonType en un elemento DOM. Si desea que aparezca intencionalmente en el DOM como un atributo personalizado, escríbalo como tipo de buttontype en minúsculas. Si lo pasó accidentalmente desde un componente principal, elimínelo del elemento DOM.

y no puedo deshacerme de esto por alguna razón, no, no quiero usar accesorios. Quiero que esto sea una propiedad separada, la aplicación funciona bien, pero recibo este mensaje en la consola. ¿Qué estoy haciendo mal? este es mi componente.

 import React, { useState } from 'react'; import styles from './genericbutton.module.scss'; import classnames from 'classnames/bind'; interface GenericButtonProps { text: string; action: any; type: string; props?: any; buttonType?: string; } const GenericButtonComponent: React.FC<GenericButtonProps> = ({ text, action, type, props, buttonType = 'primary', }) => { const [isOverButton, setIsOverButton] = useState(false); const cx = classnames.bind(styles); const buttonClassnames = cx('button', { effect: isOverButton, primary: buttonType === 'primary', secondary: buttonType === 'secondary', tertiary: buttonType === 'tertiary', }); const toggleEffect = () => { setIsOverButton(!isOverButton); }; return ( <button onClickCapture={toggleEffect} className={buttonClassnames} type={type} onClick={action} {...props} buttonType={buttonType} > {text} </button> ); }; export default GenericButtonComponent;

y así es como uso mi componente en otro componente:

 const renderSection = (childrenButtons: ButtonObj[]) => { return childrenButtons.map((childrenButton: ButtonObj) => ( <GenericButtonComponent text={childrenButton.title} action={childrenButton.action} key={childrenButton.title} props={childrenButton.props} type="submit" /> )); }; const GenericTableComponent: React.FC<Props> = ({ section, childrenButtons }) => { return ( <div className={`${styles.container} ${styles.center}`}> <LabelComponent content={section} size="medium" /> {renderSection(childrenButtons)} </div> ); };