reactjs - React-bootstrap con Typescript: Usar la propiedad fill o justify causa un error en Typescript

Código

import { useCallback, useState, useEffect } from 'react';
import { Tabs, Tab, Spinner, Alert } from 'react-bootstrap';

import { Categories } from '../../models/ICategory';
import IMovie from '../../models/IMovie';
import { getMovies } from '../../services/movies';
import Movies from '../Movies/index';


export default function Landing() {
    const [favourites, setFavourites] = useState<IMovie[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<Error | null>(null);

    const fetchFavourites = useCallback(async () => {
        try {
            const favourites = await getMovies(Categories.Favourite);
            setFavourites( favourites );
        } catch (error) {
            setError( error as Error);
        } finally {
            setLoading(false);
        }
    }, []);

    useEffect(() => {
        fetchFavourites();
    }, [fetchFavourites]);

    if(loading) {
        return (
            <Spinner animation="border" role="status">
                <span className="visually-hidden">Loading...</span>
            </Spinner>
        )
    }

    if(!loading && error) {
        return (
            <Alert variant="danger">{error.message}</Alert>
        );
    }
    

    return (
        <Tabs
            defaultActiveKey={Categories.MoviesComing}
            id='landing-page-tab'
            className='mb-3 px-3'
            fill
        >
            <Tab eventKey={Categories.MoviesComing} title='Coming Soon'>
                <Movies category={Categories.MoviesComing} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.MoviesInTheaters} title='In Theatres'>
                <Movies category={Categories.MoviesInTheaters} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.TopRatedIndia} title='Top Rated In India'>
                <Movies category={Categories.TopRatedIndia} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.TopRatedMovies} title='Top Rated'>
                <Movies category={Categories.TopRatedMovies} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.Favourite} title='Favourites'>
                <Movies category={Categories.Favourite} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
        </Tabs>
    )
}

Error

ERROR en src/components/Landing/index.tsx:50:13 TS2322: El tipo '{ children: Element[]; defaultActiveKey: Categories; id: string; className: string; fill: true; }' no es asignable al tipo 'IntrinsicAttributes & Pick

Lo mismo ocurre cuando agrego la propiedad justify a Tabs. El documento de React-Bootstrap sugiere este método: https://react-bootstrap.github.io/components/tabs/#fill-and-justify Y funciona en la página web, pero comienza con un error y ese error de compilación.

¿Cómo puedo incluir esas props sin el error de Typescript?

Respuesta #1

Usa @ts-ignore antes del atributo 'fill' para desactivar el error por ahora. Funcionará. Tenemos que abrir un problema en su repositorio de Github para llamar su atención sobre ello. Demostración a continuación:

<Tabs
   defaultActiveKey={Categories.MoviesComing}
   id='landing-page-tab'
   className='mb-3 px-3'
   // @ts-ignore
   fill
  >
     <Tab eventKey={Categories.MoviesComing} title='Coming Soon'>
            <Movies category={Categories.MoviesComing} favourites={favourites} setFavourites={setFavourites} />
        </Tab>
        <Tab eventKey={Categories.MoviesInTheaters} title='In Theatres'>
            <Movies category={Categories.MoviesInTheaters} favourites={favourites} setFavourites={setFavourites} />
        </Tab>
        <Tab eventKey={Categories.TopRatedIndia} title='Top Rated In India'>
            <Movies category={Categories.TopRatedIndia} favourites={favourites} setFavourites={setFavourites} />
        </Tab>
        <Tab eventKey={Categories.TopRatedMovies} title='Top Rated'>
            <Movies category={Categories.TopRatedMovies} favourites={favourites} setFavourites={setFavourites} />
        </Tab>
        <Tab eventKey={Categories.Favourite} title='Favourites'>
            <Movies category={Categories.Favourite} favourites={favourites} setFavourites={setFavourites} />
        </Tab>
  </Tabs