Invalid Hook call in NextJs while using dispatch react redux

I have a Customers Folder in NextJs and within Customers folder i have index.js For testing i used useState as a hook and it works but as soon as i assign useDispatch() to a variable then it throws error invalid hook call apart from the code. slices within a store is created in different file and also provider is created and store is provided to the main component of the app. useState is hook which is valid and why does it throws useDispatch() as invalid

import { useDispatch } from "react-redux"
import { useState } from "react"
const Customers = () => {
    const [id,setId] = useState('')
    const dispatch = useDispatch()
    return(
        <div>
            <h1>
                Hello
            </h1>
        </div>
    )
}
export default Customers