"TypeError: undefined is not a function" in ReactJS Test (useContext() is undefined?)

Question

I am currently trying to test photos.js component. However, it shows an error at render. I haven't even put a test case to it. Here is what's inside of photos.test.js:

import { render, cleanup } from '@testing-library/react';
import Photos from '../photos';

it('should render', () => {
  const component = render(<Photos />);
});

The error I get:

    TypeError: undefined is not a function

      134 |   let history = useHistory();
      135 |   const [search, setSearch] = useState("");
    > 136 |   const [state, setPhotos] = usePhotoContext();
          |                              ^
      137 |
      138 |   useEffect(() => {
      139 |     getPhotos().then((res) => {

I don't know why usePhotoContext() is said undefined since it says "undefined is not a function". I have no idea how to solve this and what is wrong since I am a total newbie in React. I've also added the the PhotoProvider to my main (App.js) file.

photos.js:

import { getPhotos } from "../api";
import { usePhotoContext } from "../context/PhotoContext";
import { Link as RouterLink, useHistory } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import InputBase from "@material-ui/core/InputBase";
import Grid from "@material-ui/core/Grid";

const PhotosGrid = () => {
  let history = useHistory();
  const [search, setSearch] = useState("");
  const [state, setPhotos] = usePhotoContext();
  useEffect(() => {
    getPhotos().then((res) => {
      setPhotos({
        ...state,
        photos: res.data.response,
      });
    });
  }, []);

return (
    <>
      <div data-testid="photos" className={classes.root}>
        <Typography
          align="center"
          variant="h4"
          color="primary"
          style={{ marginTop: "20px" }}
          gutterBottom
        >
          Photo Feed
        </Typography>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            width: "100",
            marginTop: "10px",
            marginBottom: "20px",
          }}
        >
          <Paper
            component="form"
            style={{
              marginRight: "10px",
            }}
          >
            <InputBase
              className={classes.input}
              onChange={handleSearch}
              placeholder="Search Photo"
              inputProps={{ "aria-label": "search photo" }}
              onKeyDown={keyPressHandler}
            />
          </Paper>
          <RouterLink className={classes.noDecoration} to={`/${search}`}>
            <Button
              style={{ marginRight: "20px" }}
              variant="contained"
              size="small"
              color="primary"
            >
              Search
            </Button>
          </RouterLink>
        </div>
        <Grid
          container
          spacing={2}
          alignItems="stretch"
          className={classes.grid}
        >
          {state.photos.map((photo, index) => (
            <Grid item xs={12} md={3} sm={4}>
              <PhotoCard key={photo.id + index} {...photo} />
            </Grid>
          ))}
        </Grid>
      </div>
    </>
  );
};

export default PhotosGrid;

PhotoContext.js

import React, { useState, createContext, useContext } from "react";

const photoState = {
  photo: {
    title: "",
    description: "",
    year: null,
    duration: null,
    genre: "",
    rating: null,
    review: "",
    image_url: "",
  },
  photos: [],
};

export const PhotoContext = createContext(photoState);

export const PhotoProvider = ({ children }) => {
  const photo = useState(photoState);
  return (
    <PhotoContext.Provider value={photo}>{children}</PhotoContext.Provider>
  );
};

export const usePhotoContext = () => useContext(PhotoContext);