TypeError: prevDeps is undefined

I am using react-bootstrap to make a react app, it works fine I am currently making the navbar but when I click on dropdown on my navbar it just gives me this weird error.

TypeError: prevDeps is undefined
areHookInputsEqual

My navbar componenet has 2 more child components A notification dropdown and Search Bar

Here's my Search component

import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button'
import FormControl from 'react-bootstrap/FormControl'
class Search extends Component{
    render(){
        return (
            <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                 <Button variant="outline-danger">Search</Button>
            </Form>
        )
    }

}   

Here's my notification component which has the dropdown

import React,{Component} from "react";
import NavDropdown from 'react-bootstrap/NavDropdown'

class Notification extends Component{
    render(){
        return (
            <NavDropdown id="collasible-nav-dropdown">
                 <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            </NavDropdown>
        )
    }

}

And here's the parent component Header

import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'

class Header extends Component{

    render(){
        return (
        <Navbar bg="light" expand="lg">
            <Navbar.Brand href="#home">Dora</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <Search/>
                </Nav>
               <Notification/>
            </Navbar.Collapse>
        </Navbar>  
        )   
    }
}