Variable is undefined when component is re-rendered in React

In my app, I have a list of university departments. When you click a specific department, you are taken to the department landing page (/department/:deptId). I am using React Router's useParams hook to get the department id from the URL and then find that specific department object from my array of departments passed down as props.

This works fine when navigating from the list of departments to the individual department page, but if I refresh the page, I get the following error: Uncaught TypeError: can't access property "Name", dept is undefined

My code is below:

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

const Department = props => {
  const { id } = useParams();
  const [dept, setDept] = useState({});

  useEffect(() => {
    const unit = props.depts.find(item => item.Id === Number(id));
    setDept(unit);
  }, [id]);

  return (
    <div>
      <h1>{dept.Name}</h1>
    </div>
  );
};

export default Department;

I'm not sure why this happens. My understanding is that the props should remain the same, and the useEffect should run when the page is refreshed. Any idea what I'm missing?

More code below:

The depts array is passed as props from the App component, which is getting it from an axios call in a Context API component.

import { UnitsContext } from './contexts/UnitsContext';

function App() {
  const { units } = useContext(UnitsContext);

  return (
    <>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/people" component={Persons} />
        <Route exact path="/department/:id">
          <Department depts={units} />
        </Route>
      </Switch>
    </>
  );
}

// Context Component. Provider wraps `index.js`

export const UnitsContext = createContext();

export const UnitsContextProvider = props => {
  const url = 'http://localhost:5000';

  const [units, setUnits] = useState([]);

  useEffect(() => {
    axios
      .get(`${url}/api/units`)
      .then(res => {
        setUnits(res.data);
      })
      .catch(err => {
        console.log(err);
      });
  }, []);

  return (
    <UnitsContext.Provider value={{ units }}>
      {props.children}
    </UnitsContext.Provider>
  );
};