How to snapshot test with jest and RTKquery?

Question

I'm bothering with it couple days. My goal is to snapshot screen/component but I'm stuck. I have to use jest snapshot and the library react redux toolkit query. In the ContactScreen are rendered data of contact office depending on which user is logged in. So if you want to see office data first of all you must logged in and after that there's two endpoints getting office_id and second endpoint using office_id to get all data about office.

ContactScreen-test.js

import * as React from 'react';
import renderer from 'react-test-renderer';
import 'isomorphic-fetch';
import { useGetUserDataQuery, useGetOfficeDataQuery } from '../../services';

import ContactScreen from '../../screens/ContactScreen';

jest.mock('../../services', () => ({
  useGetUserDataQuery: jest.fn().mockReturnValue("fc5bf89b-6df8-4831-8f56-d08bb6a8d728")
}));

// "office_id": "fc5bf89b-6df8-4831-8f56-d08bb6a8d728"

it('returns the mocked office_id', async () => {
  const office_id = await useGetUserDataQuery();  // Run the function
  expect(office_id).toEqual('fc5bf89b-6df8-4831-8f56-d08bb6a8d728');  // Make an assertion on the result
});

it('renders correctly', () => {
  const snap = renderer.create(<ContactScreen />).toJSON();
  expect(snap).toMatchSnapshot();
});

After running test error appear which is according to two files services.ts and ContactScreen.tsx

error file

TypeError: (0 , _services.useGetOfficeDataQuery) is not a function

      17 |
      18 |   const { data: userData } = useGetUserDataQuery();
    > 19 |   const { data: contact } = useGetOfficeDataQuery(userData?.office_id);
         |                             ^
      20 |
      21 |   const OfficeAdress = () => {
      22 |     return (

services.ts

[...]

export const callApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: 'link to api call',
    prepareHeaders: (headers, { getState }) => {
      const token = (getState() as RootState).auth.access_token;

      if (device_id) {
        headers.set('Device_Id', device_id);
        headers.set('Authorization', `${token}`);
      }
      return headers;
    }
  }),
  endpoints: builder => ({
    login: builder.mutation<UserResponse, LoginRequest>({
      query: data => ({
        url: '/sessions',
        method: 'POST',
        body: data
      })
    }),
    getUserData: builder.query({
      query: (arg: void) => ({ url: `users/me/`, body: arg })
    }),
    getOfficeData: builder.query({
      query: (office_id: string) => ({ url: `office_contacts/${office_id}` })
    })
  })
});

export const { useLoginMutation, useGetOfficeDataQuery, useGetUserDataQuery } =
  callApi;

ContactScreen.tsx

const ContactScreen = () => {
  const [isLoaded] = useFonts({
    'Poppins-Medium': require('../../assets/fonts/Poppins-Medium.otf'),
    'Poppins-Regular': require('../../assets/fonts/Poppins-Regular.otf')
  });

  const { data: userData } = useGetUserDataQuery();
  const { data: contact } = useGetOfficeDataQuery(userData?.office_id);

  const OfficeAdress = () => {
    return (
      <Text>
        {t('contact.shortcutStreet')} {contact?.street} {contact?.house_number}{' '}
        {contact?.room_number}
        {'\n'}
        {contact?.zip_code} {contact?.city}
      </Text>
    );
  };

  const OfficeAdressMap =
    'https://www.google.com/maps/search/?api=1&query=' +
    `${contact?.street} ${contact?.house_number} ${contact?.room_number} ${contact?.zip_code} ${contact?.city}`;

  if (!isLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={styles.container}>
        <View style={styles.officeNameContainer}>
          <Text style={styles.officeName}>{contact?.name}</Text>
        </View>

        <View>
          <Text style={styles.descriptionText}>{t('contact.address')}</Text>
          <View style={styles.informationContainer}>
            <View style={styles.icons}>
              <ContactIcon name="map-marker-outline" />
            </View>
            <TouchableOpacity
              onPress={() => {
                Linking.openURL(OfficeAdressMap);
              }}
            >
              <Text style={styles.informationText}>
                <OfficeAdress />
              </Text>
            </TouchableOpacity>
          </View>
        </View>

[...]