A lot of extra props being shown despite proper interface

Read the docs and I see that I've done everything right. Have a typed functional component with named export and can see somehow a lot more entries in prop table apart from normal props.

Below is my component which renders a whole lot of extra props. I mean a lot of extra hrefLang, download, draggable , lang, tabIndex and what not. I see propFilter options under Loader Options but again not sure how to use it if it all it can help in my case. Docs can be more clear.

import * as React from "react";
import styled from "styled-components";
import {
    ButtonProps,
    ButtonStyles,
    LinkStyles
} from "@turtlemint/tm-components-shared/src/components/button";

const StyledButton = styled.button<ButtonProps>`
    ${ButtonStyles};
`;
const StyledLink = styled.a<ButtonProps>`
    ${LinkStyles};
`;

export const Button: React.FC<ButtonProps> = ({
    btnType = "primary",
    size = "sm",
    disabled = false,
    block = false,
    icon = "",
    loading = false,
    className = "",
    prefixCls = "tm-button",
    onClick = function() {},
    href = "#",
    target = "blank",
    htmlType = "button",
    children = <></>,
    ...rest
}: ButtonProps) => {
    const handleClick: React.MouseEventHandler<
        HTMLButtonElement | HTMLAnchorElement
    > = e => {
        if (btnType === "link") {
            e.preventDefault();
        }
        onClick(e);
    };
    return (
        <>
            {loading ? (
                <StyledButton
                    btnType={btnType}
                    size={size}
                    block={block}
                    disabled={disabled}
                >
                    Loading...
                </StyledButton>
            ) : (
                <>
                    {btnType === "link" ? (
                        <StyledLink
                            href={href}
                            target={target}
                            disabled={disabled}
                            {...rest}
                        >
                            {children}
                        </StyledLink>
                    ) : (
                        <StyledButton
                            onClick={handleClick}
                            btnType={btnType}
                            size={size}
                            block={block}
                            disabled={disabled}
                            type={htmlType}
                            className={`${prefixCls}-${className} `}
                            {...rest}
                        >
                            <span
                                style={{
                                    verticalAlign: "middle",
                                    marginLeft: icon ? "8px" : "0px"
                                }}
                            >
                                {children}
                            </span>
                        </StyledButton>
                    )}
                </>
            )}
        </>
    );
};

export default Button;

Notes - Docs can also be updated for the fact that I can use different name for add("AnyName") when my component is <Button>

strothj / react-docgen-typescript-loader

A lot of extra props being shown despite proper interface #65