How to use react testing library to write test cases efficiently for a component which is using useContext hook?

Question

So, currently i am having trouble writing test cases for my react application. I am using react testing library to write test cases for a component, which uses an useContext hook. also it uses redux call, ex: useGetDataQuery. so just help me out what are the neccessary things I have to do. so this is my main component.

import { useState, useContext } from 'react';
import { DataSourceContext } from '../../hooks/useDataSourceContext';
import { useGetDataSourceQuery } from '../../redux/services/quesionAsk';
import { InputField } from '../settings/fileUploaderPage/fileUploader.page.styled';
const storageConfigs = [
  { label: 'Azure Blob', value: AZURE_BLOB_TYPE },
  { label: 'AWS S3', value: AWS_S3_TYPE },
  { label: 'FTP', value: FTP_TYPE },
];

const AddDataSourcePage = () => {
  const { getName, updateName } = useContext(DataSourceContext);
  const [configType, setConfigType] = useState(AZURE_BLOB_TYPE);
  const [inputName, setInputName] = useState(getName());
  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const {
    data: dataSources = [],
    isError: isGetFileCollectionsError,
    isLoading: isGetFileCollectionsLoading,
    isSuccess: isGetFileCollectionsSuccess,
  } = useGetDataSourceQuery({});

  const { t } = useTranslation();
  const handleStorageConfigChange = (value) => {
    setConfigType(value);
  };
  const handleInputChange = (event) => {
    const newName = event.target.value.trim();
    const existingName = dataSources.map((source) => source.connectionName);
    if (existingName.includes(newName)) {
      setErrorMessage('Connection name already exist');
      setError(true);
    } else {
      setInputName(newName);
      updateName(newName);
      setErrorMessage(null);
      setError(false);
    }
  };
  return (
    <PageContainer>
          <Grid container spacing={2} sx={{ marginBottom: 2 }}>
              <Grid item>
                <InputField
                  type="text"
                  size="small"
                  required
                  fullWidth
                  error={error}
                  id="outlined-required"
                  value={getName()}
                  label={t(
                    'fileUploaderPage.storageConfiguration.newSourcePopover.name',
                  )}
                  onChange={handleInputChange}
                  helperText={errorMessage}
                />
              </Grid>
              <Grid item>
                <DropdownOne
                  onChange={handleStorageConfigChange}
                  defaultValue={AZURE_BLOB_TYPE}
                  label={t('addDataSourcePage.dropdownLabel.storageType')}
                  value={configType}
                  items={storageConfigs}
                  sx={{ marginTop: 2 }}
                />
              </Grid>
              <Grid item>
                <DataSourceForm
                  sourceType={configType}
                  dataSourceName={inputName}
                />
              </Grid>
            </Grid>
          </Grid>
    </PageContainer>
  );
};

export default AddDataSourcePage;

and this is my useConext hook.

import { createContext, React, useState } from 'react';
import PropTypes from 'prop-types';

const DataSourceContext = createContext();

const CreateDataSourceProvider = (props) => {
  const [clearName, setClearName] = useState('');

  const updateName = (value, input) => {
    setClearName(value);
  };

  const getName = () => {
    return clearName;
  };

  return (
    <DataSourceContext.Provider value={{ getName, updateName }}>
      {props.children}
    </DataSourceContext.Provider>
  );
};
CreateDataSourceProvider.propTypes = {
  children: PropTypes.node.isRequired,
};

export { DataSourceContext, CreateDataSourceProvider };

and so far I have tried lots of things, but not working