How do you use React-bootstrap with Typescript?

I have started using Typescript in my project next to React-Bootstrap and the following piece of code:

 const renderSearchAddressButton = (): JSX.Element => {
    return (
      <div className="search-address-button">
        <Button variant="myownvariant" onClick={onClickSearchAddressButton}>
          {t('search-address-button')}
        </Button>
      </div>
    );
  };

Gives me a Lint error because myownvariant is not a correct variant. The code works but the only variant types allowed are the following:

variant?:
    | 'primary'
    | 'secondary'
    | 'success'
    | 'danger'
    | 'warning'
    | 'info'
    | 'dark'
    | 'light'
    | 'link'
    | 'outline-primary'
    | 'outline-secondary'
    | 'outline-success'
    | 'outline-danger'
    | 'outline-warning'
    | 'outline-info'
    | 'outline-dark'
    | 'outline-light';

Those types are coming from @types/react-bootstrap, but they do not seem aligned to the official react-bootstrap as they do not leave any room for your own variant.

Therefore, the question is, how can I get rid of that error? Is there another package with better types? I thought about modifying the types myself but every time I update my libraries I guess it will get overwritten.

Thank you in advance and regards.