React-bootstrap with Typescript: Using fill or justify prop causing typescript error

Code

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 in src/components/Landing/index.tsx:50:13 TS2322: Type '{ children: Element[]; defaultActiveKey: Categories; id: string; className: string; fill: true; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<TabsProps, "slot" | "style" | "title" | "variant" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 252 more ... | Compiled with warnings.

Same happens when I add the justify prop to Tabs. The React-Bootstrap document suggests this method: https://react-bootstrap.github.io/components/tabs/#fill-and-justify And it works on webpage, but starts with an error and that compilation error.

How can I include those props without the Typescript error?