I get this error:

React does not recognize the buttonType prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase buttontype instead. If you accidentally passed it from a parent component, remove it from the DOM element.

and I can't get rid of this for some reason, no I don't want to use props. I want this to be a separate property, the app works fine, but I get this message in the console. What am I doing wrong? this is my component.

    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;

and this is how I use my component in another component:

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>
  );
};