Youtube Data Api V3 using React js showing results of previous fetch

I was making a youtube clone in which user can search for a term and the youtube data API will show the desired results in react js but every time I am querying the data of the previous query is being shown.When I am logging 'Post' ie the JSON data

**Searchquery Component*

    import React,{useEffect,useState} from 'react'    import axios from 'axios'    import Cards from './Cards'    function SearchResults(props) {        const query = props.match.params.query;        const [posts, setPosts] = useState([])        useEffect(() => {            axios({"method": "GET","url": 'https://www.googleapis.com/youtube/v3/search',"params":{'part':'snippet','maxResults':'20','key':'[API_KEY]','q':query                }            })                .then((res) => {                    setPosts(res.data.items)                               })                .catch((error) => {                    console.log(error)                })                console.log(posts);         },[query])        return (<div><Cards/></div>        )    }    export default SearchResults