TypeError: prevDeps.join is not a function next js

Question

I want to create a search bar in next js and firebase and it works by getting the slug from the url and parse it though my search algorithm. The problem is that if the user uses the search bar 2 times it breaks and shows this error:

this is how I push the data

              <Link  href={`http://localhost:3000/search/${search}/`} >
                <Magnify fontSize='small' />
              </Link>

and here is how ii get it

   const serachId = router.query.id;
    useEffect(() => {
        onAuthStateChanged(auth, async (user) => {

            if (user) {
                // User is signed in, see docs for a list of available properties
                // https://firebase.google.com/docs/reference/js/firebase.User
                const places = query(collection(getFirestore(app), '/programs'))
                const querySnapshot = await getDocs(places)



                querySnapshot.docs.forEach(doc => {

                    if (JSON.stringify(doc.data()).includes(router.query.id)) {
                        let programObj = {
                            age: doc.data().price,
                            icon: doc.data().logo,
                            status: "software",
                            date: doc.data().start,
                            name: doc.data().name,
                            salary: '$$$',
                            email: doc.data().website,
                            designation: 'Human Resources Assistant',
                            id: doc.id
                        };
                        setPrograms(prev => [...prev, programObj]);
                    }
                })
            }
            else {
                console.log("no loggin")
            }
        });

    }, router.query.id)

Answer 1

Your dependency array should be in square brackets [ ]

like this: [router.query.id]