Can not render antd CSS when routing automatically / to some other link using react routing

Question

I have index.js which handles my routing.

import 'antd/dist/reset.css';
  <Router>
                <NavBar />
                <Routes>
                    <Route exact path="/" element={<Navigate to="/search/home"/> } />
                    <Route exact path="/search" element={<Navigate to="/search/home"/> } />
                    <Route path="/search/home" element={<SearchBar />} />
                </Routes>
            </Router>

And my other SearchBar.js where my autocomplete is written

import { AutoComplete } from 'antd';
  <AutoComplete
                                className="form-control"
                                style={{
                                    flex: "1 1 auto",

                                }}
                                variant="borderless"
                                options={suggestions}
                                onSelect={
                                    () => {
                                        console.log("selected")
                                        eventHandler({ preventDefault: () => { } })
                                    }
                                }
                                onSearch={handleSearch}
                                placeholder="Enter stock ticker symbol"
                                value={inputValue.toUpperCase()}
                                onChange={(value) => setInputValue(value)}
                                notFoundContent={
                                    loading ? <Spinner animation="border" style={{ color: 'blue' }} /> : null
                                }
                            >
                            // defaultActiveFirstOption={true}
                            </AutoComplete>

When the server is loaded at http://localhost:3000/ it redirects to http://localhost:3000/search/home. At this time the css of autocomplete is not being loaded it looks like this (https://i.stack.imgur.com/Q98oW.png) And if the link is directly entered then it looks like this (https://i.stack.imgur.com/MYyPp.png) and this is what i want.

I found out that when the site is loaded at / the input tag uses some other css. I think of bootstrap but should that be overridden by ant css