When adding this Typeahead component my react application won't load anymore

[WouterBosch]

Version

6.3.2

Steps to reproduce

I am using React + Vite
I installed the react-bootstrap-typeahead using npm install --save react-bootstrap-typeahead. That gave me the error: "504 (Outdated Optimize Dep)", so to fix that I added the code below to my vite.config.js

optimizeDeps: {
    exclude: ['react-bootstrap-typeahead']
  }

I then tried to include the typeahead component in my code and it failed and gave me this error:

This is my component

import { useState } from 'react';
// import 'react-bootstrap-typeahead/css/Typeahead.css';
import BasicInputField from '../components/BasicInputField';
import Card from '../components/Card';
import PageHeader from '../components/PageHeader';
import TransactionList from '../components/TransactionList';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';

function Transactions() {
    const [search, setSearch] = useState('');
    const [filter, setFilter] = useState({});

    const setNewFilter = (name, value) => {
        let newFilter = { [name]: value };

        setFilter({ ...filter, ...newFilter });
    };

    const transactions = [];

    const typeOptions = [
        { id: 'all', label: 'All' },
        { id: 'expense', label: 'Expense' },
        { id: 'income', label: 'Income' },
        { id: 'transfer', label: 'Saving Transfer' },
    ];

    return (
        <div>
            <PageHeader title="Transaction Feed" iconClass="currency-gbp" breadcrumbs={[{ title: 'Transaction Feed', path: '/transactions' }]} value={search} onChange={(ev) => setSearch(ev.target.value)} />
            <div className="row">
                <Card width={12}>
                    <h4 className="card-title">Transactions</h4>
                    <form action="">
                        <div className="row">
                            <div className="col-12">
                                <BasicInputField placeholder="Search..." id="transactionSearch" />
                            </div>
                        </div>

                        <div className="row">
                            <div className="col-md-6">
                                <Typeahead
                                    options={typeOptions}
                                    onChange={(selected) => {
                                        setNewFilter('type', selected);
                                    }}
                                    placeholder="Type"
                                    id="typeFilter"
                                    selected={{ id: 'all', label: 'All' }}
                                />
                            </div>
                        </div>
                    </form>
                    <TransactionList transactions={transactions} />
                </Card>
            </div>
        </div>
    );
}

export default Transactions;

Expected Behavior

I expected the module to be loaded and the typeahead component to be rendered

Actual Behavior

Whole application fails to render

[WouterBosch]

Not sure how but its fixed