Cant access an object javascript

I have a jsx component in React. I am trying to access an object from my backend server. When I console log the whole Object I am able to get data back, but when I console.log one of the values I get an undefined. Here is my code.

import React, { Fragment, useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Moment from 'react-moment';
import { useTable } from 'react-table';
import { Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';

import { projectsDetails } from '../actions/projectActions';
import { fundingSourcesDetails } from '../actions/fundingSourceActions';

import Loader from './Loader';
import SectionHeader from './SectionHeader';

const ProjectSummary = () => {
  const dispatch = useDispatch();

  const projectDetails = useSelector(state => state.projectDetails);
  const { projects } = projectDetails;

  const fundingSourceDetails = useSelector(state => state.fundingSourceDetails);
  const { fundingSources } = fundingSourceDetails;

  useEffect(() => {
    dispatch(projectsDetails());
    dispatch(fundingSourcesDetails());
  }, [dispatch]);

  const fundSourceName = fundingSources.find(f => f._id);
  console.log(fundSourceName);

  const COLUMN_NAMES = [
    {
      Header: 'Status',
      accessor: 'status'
    },
    {
      Header: 'Name',
      accessor: projects => (
        <div>
          <Link to={`/project/${projects._id}`} style={{ color: '#E3692D' }}>
            {projects.name}
          </Link>{' '}
          <br /> {projects.projectId}-{projects.fundingSource}-
          {projects.typeNumber}{' '}
        </div>
      )
    },
    {
      Header: 'Start Date',
      accessor: projects => (
        <Moment format='MM/DD/YYYY'>{projects.startDate}</Moment>
      )
    },
    {
      Header: 'End Date',
      accessor: projects => {
        return projects.endDate === null ? (
          ''
        ) : (
          <Moment format='MM/DD/YYYY'>{projects.endDate}</Moment>
        );
      }
    },
    {
      Header: 'Type',
      accessor: 'type'
    },
    {
      Header: 'Location',
      accessor: 'state'
    }
  ];

  const columns = useMemo(() => COLUMN_NAMES, []);
  const data = projects;

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  return (
    <Fragment>
      <Table striped {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))}
            </tr>
          ))}
        </thead>
        {projects.length > 0 ? (
          <tbody {...getTableBodyProps()}>
            {rows.map(row => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map(cell => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        ) : (
          <Loader />
        )}
      </Table>
    </Fragment>
  );
};

export default ProjectSummary;

Here is the output of the above code

If I add .fundingSourceName to that console.log I get an undefined error. Here is a screenshot of the error.