News.jsx:16 Uncaught (in promise) TypeError: (0 , _services_cryptoNewsApi__WEBPACK_IMPORTED_MODULE_2__.useGetCryptoNewsQuery) is not a function

Question

I was trying to fetch data from beingNewsApi with the help of a custom react hook named as

useGetCryptoNewsQuery

const createRequest = (url) => ({ url, headers: cyrptoNewsHeaders });

export const cryptoNewsApi = createApi({
    reducerPath: 'cryptoNewsApi',
    baseQuery: fetchBaseQuery({ baseUrl }),
    endpoints: (builder) => ({
        getCryptoNews: builder.query({
            query: ({ newsCategory, count }) => createRequest(`/news/search?q=${newsCategory}&safeSearch=Off&textFormat=Raw&freshness=Day&count=${count}`),
        }),
    }),

});


export const { useGetCryptoNewsQuery } = cryptoNewsApi;

but it shows the error that I have titled my post with. The code above is the api code that I have written to fetch the news and the code below is where I am calling it as a custom hook.

error : Uncaught (in promise) TypeError: (0 , services_cryptoNewsApi__WEBPACK_IMPORTED_MODULE_2_.useGetCryptoNewsQuery) is not a function

import { useGetCryptoNewsQuery } from "../services/cryptoNewsApi";
const { Title, Text } = Typography; 
const { Option } = Select;

const demoImage = 'https://www.bing.com/th?id=OVFT.mpzuVZnv8dwIMRfQGPbOPC&pid=News';

const News = ({ simplified }) => {

  const { data: cryptoNews}  = useGetCryptoNewsQuery({ newsCategory: 'Cryptocurrency', count: simplified ? 6 : 12 });

  if(!cryptoNews?.value) return 'Loading ... '
  
  console.log(cryptoNews);


  return (
    <div>News</div>
  )
}