Uncaught TypeError: useGetTopChartQuery is not a function at Discover component

Question

Uncaught TypeError: useGetTopChartQuery is not a function at Discover component

I am using redux toolkit for the first time and I can't figure out what the problem is. The error code is: Uncaught TypeError: useGetTopChartQuery is not a function is not a function I have react version 18.2.0 and redux toolkit version 1.8.5

code from API:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const shazamCoreApi = createApi({
  reducerPath: 'shazamCoreApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://shazam-core7.p.rapidapi.com',
    prepareHeaders: (headers) => {
      headers.set('X-RapidAPI-Key', 'XYZ');

      return headers;
    },
  }),

  endpoints: (builder) => ({
    getTopCharts: builder.query({ query: () => '/charts/get-top-songs-in-world' }),
  }),
});

export const { useGetTopChartQuery } = shazamCoreApi;

component that uses the data:(discover.jsx)

import { Error, Loader, SongCard } from '../components';
import { genres } from '../assets/constants';
import { useGetTopChartQuery } from '../redux/services/shazamCore';

const Discover = () => {
  const { data, isFetching, error} = useGetTopChartQuery();
  const titlevalue = 'POP';
  console.log(data);

  return (
    <div className="flex flex-col ">
      <div
        className="w-full  flex justify-between items-center sm:flex-row
        flex-col mt-4 mb-10"
      >
        <h2 className="font-bold text-3xl text-white text-left">
          Discover{titlevalue}
        </h2>
        <select className="bg-black text-gray-300 text-sm p-3 rounded-lg outline-none sm:mt-0 mt-5 cursor-pointer">
          {genres.map((genre) => (
            <option
              key={genre.value}
              value={genre.value}
              className="curser-pointer "
            >
              {genre.title}
            </option>
          ))}
        </select>
      </div>

      <div className="flex flex-wrap sm:justify-start justify-center gap-8">
        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((song, i) => (
          <SongCard key={song.key} song={song} i={i} />
        ))}
      </div>
    </div>
  );
};
export default Discover;

store.js:

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';

import playerReducer from './features/playerSlice';
import {shazamCoreApi} from "./services/shazamCore"

export const store = configureStore({
  reducer: {
    [shazamCoreApi.reducerPath]: shazamCoreApi.reducer,
    player: playerReducer,
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(shazamCoreApi.middleware)
});