In a REACT app I am working on with a FastAPI backend, I am getting this error:
```
index.jsx:16 Uncaught TypeError: images.filter is not a function
    at ControlPanel (index.jsx:16:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25750:1)
```

In relation to my ControlPanel/index.jsx:
```
import React, { useState, useContext } from "react";
import { Flex, Tabs } from "antd";
// import axios from "axios";
import { SourceContext } from "../../contexts/SourceContext";

const { TabPane } = Tabs;

const ControlPanel = (images, selectedImageIds) => {
  const [cpActiveTabKey, setCpActiveTabKey] = useState("info");
  const { source } = useContext(SourceContext);

  const onTabChange = (key) => {
    setCpActiveTabKey(key);
  };

  const selectedImages = images.filter((image) =>
    selectedImageIds.has(image.id)
  );

  return (
    // Define your control panel here
    <Flex
      vertical
      style={{ width: "40%", height: "100%", backgroundColor: "#f0f0f0" }}
    >
      <Flex className="tabs-container">
        <Tabs
          className="centered-tabs"
          activeKey={cpActiveTabKey}
          onChange={onTabChange}
        >
          <TabPane
            className="image-info"
            tab="Info"
            key="info"
            style={{ backgroundColor: "#f0f0f0" }}
          >
            <ul>
              {selectedImages.map((image, index) => (
                <li key={image.id}>
                  <h3>Image ID: {image.id}</h3>
                  {image.captions && image.captions.length > 0 ? (
                    <ul>
                      {image.captions.map((caption, captionIndex) => (
                        <li key={captionIndex}>{caption.caption}</li>
                      ))}
                    </ul>
                  ) : (
                    <p>No captions available</p>
                  )}
                </li>
              ))}
            </ul>
          </TabPane>
          <TabPane tab="Captioning" key="captioning">
            Captioning Tab
          </TabPane>
          <TabPane tab="Dataset" key="dataset">
            Dataset Tab
          </TabPane>
          <TabPane tab="Tools" key="tools">
            Tools Tab
          </TabPane>
        </Tabs>
      </Flex>
    </Flex>
  );
};

export default ControlPanel;
```

With images being defined and set in two locations, ImagesPage/index.jsx:
```
import React, { useState, useEffect, useContext } from "react";
import axios from "axios";
import ImageGrid from "../../components/ImageGrid";
import ImageActionBar from "../../components/ImageActionBar";
import ControlPanel from "../../components/ControlPanel";
import SourceControl from "../../components/SourceControl";
import { SourceContext } from "../../contexts/SourceContext";
import { Layout } from "antd";

const { Content } = Layout;

const ImagesPage = () => {
  const [images, setImages] = useState([]); // This will be the current page's images
  const [totalImages, setTotalImages] = useState(0); // Total images count
  const [lastSelectedIndex, setLastSelectedIndex] = useState(null);
  const [selectedImageIds, setSelectedImageIds] = useState(new Set());
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const { source } = useContext(SourceContext);

  useEffect(() => {
    async function fetchImages() {
      if (source === "Database") {
        try {
          const response = await axios.get(
            `http://localhost:8000/api/v1/images/?page=${
              currentPage - 1
            }&limit=${pageSize}`
          );

          let images = response.data.items;
          images.forEach((image) => {
            image.thumbnailSrc = `http://localhost:8000/api/v1/images/${image.id}/file?width=150&height=150`;
            image.imageSrc = `http://localhost:8000/api/v1/images/${image.id}/file`;
            image.captions = ["thumbnail"]; // TODO: We need to get the caption...maybe? Maybe an endpoint that returns images + all captions
          });
          setImages(images);
          setTotalImages(response.data.total);
        } catch (error) {
          // TODO: Handle errors
          console.error("Error fetching images: ", error);

          if (error.response) {
            // Server responded with a status code that falls out of the range of 2xx
            console.error(error.response.data);
            console.error(error.response.status);
            console.error(error.response.headers);
          } else if (error.request) {
            // The request was made but no response was received
            console.error(error.request);
          } else {
            // Something happened in setting up the request that triggered an error
            console.error("Error", error.message);
          }
        }
      }
    }

    fetchImages();
    setSelectedImageIds(new Set());
  }, [currentPage, pageSize, source]);

  useEffect(() => {
    setCurrentPage(1);
    setSelectedImageIds(new Set());
  }, [pageSize, source]);

  const handlePageChange = async (page, pageSize) => {
    setCurrentPage(page);
    setSelectedImageIds(new Set());
    setPageSize(pageSize);
  };

  const handlePageSizeChange = async (current, size) => {
    setCurrentPage(1); // We reset back to first page
    setSelectedImageIds(new Set());
    setPageSize(size);
  };

  const toggleSelection = (imageId, index, event) => {
    const newSelectedImageIds = new Set(selectedImageIds);

    if (event.shiftKey && lastSelectedIndex !== null) {
      // Shift selection logic
      const start = Math.min(lastSelectedIndex, index);
      const end = Math.max(lastSelectedIndex, index);
      for (let i = start; i <= end; i++) {
        newSelectedImageIds.add(images[i].id);
      }
    } else if (event.ctrlKey) {
      // Control selection logic
      if (newSelectedImageIds.has(imageId)) {
        newSelectedImageIds.delete(imageId);
      } else {
        newSelectedImageIds.add(imageId);
      }
      setLastSelectedIndex(index); // Update the last selected index
    } else {
      // Regular click selection logic
      if (newSelectedImageIds.size === 1 && newSelectedImageIds.has(imageId)) {
        newSelectedImageIds.delete(imageId);
      } else {
        newSelectedImageIds.clear();
        newSelectedImageIds.add(imageId);
        setLastSelectedIndex(index); // Update the last selected index
      }
    }

    setSelectedImageIds(newSelectedImageIds);
  };

//   // Select all images
//   const selectAll = () => {
//     const newSelectedImageIds = new Set();
//     images.forEach((image) => newSelectedImageIds.add(image.id));
//     setSelectedImageIds(newSelectedImageIds);
//   };

//   // Deselect all images
//   const deselectAll = () => {
//     setSelectedImageIds(new Set());
//   };

//   // Toggle select all images
//   const toggleSelect = () => {
//     if (selectedImageIds.size === images.length) {
//       deselectAll();
//     } else {
//       selectAll();
//     }
//   };

  return (
    <>
      <ImageActionBar />
      <SourceControl basePath="C:\" setImages={setImages} setTotal={setTotalImages} page={currentPage} pageSize={pageSize} />
      <Content style={{ margin: "24px 16px 0", overflow: "initial" }}>
        <ImageGrid
          images={images}
          selectedImageIds={selectedImageIds}
          toggleSelection={toggleSelection}
          onPaginationChange={handlePageChange}
          page={currentPage}
          limit={pageSize}
          total={totalImages}
          onPaginationSizeChange={handlePageSizeChange}
        />
        <ul>
            {Array.from(selectedImageIds).map((id) => (
                (<li>{id}</li>)
            ))}
        </ul>
        <ControlPanel images={images} selectedImageIds={selectedImageIds} />
      </Content>
    </>
  );
};

export default ImagesPage;
```

And in LocalFileBrowser/index.jsx:
```
import React, { useState, useEffect, useCallback } from "react";
import { Breadcrumb, Input, message } from "antd";
import axios from "axios";
import { FolderOutlined } from "@ant-design/icons";
import "./LocalFileBrowser.css";

const LocalFileBrowser = ({ basePath, setImages, setTotal, page, pageSize }) => {
  const [currentPath, setCurrentPath] = useState(basePath || "");
  const [folderContents, setFolderContents] = useState({
    directories: []
  });

  //   const history = useHistory();

  // A function to fetch directory contents
  const fetchDirectoryContents = useCallback(async (path) => {
    try {
      const response = await axios.get(
        `http://localhost:8000/api/v1/browse-dirs/${encodeURIComponent(path)}`
      );
      setFolderContents(response.data);
    } catch (error) {
      message.error("Error fetching directory contents");
      console.error("Error fetching directory contents:", error);
    }
  }, []);

  // A function to fetch directory contents
  const fetchDirectoryImages = useCallback(async (path) => {
    try {
        const response = await axios.get(`http://localhost:8000/api/v1/browse-images/${encodeURIComponent(path)}?page=${page - 1}&limit=${pageSize}`);

          let images = response.data.images;
          images.forEach((image) => {
            image.id = image.path;
            image.thumbnailSrc = `http://localhost:8000/api/v1/local-images/?file_path=${image.path}&width=150&height=150`;
            image.imageSrc = `http://localhost:8000/api/v1/local-images/?file_path=${image.path}`;
            image.captions = [image.path];
          });
          setImages(images);
          setTotal(response.data.total);
    } catch (error) {
      message.error("Error fetching directory contents");
      console.error("Error fetching directory contents:", error);
    }
  }, [page, pageSize, setImages, setTotal]);

  // Calling fetchDirectoryContents when the component mounts
  // and when currentPath changes
  useEffect(() => {
    fetchDirectoryContents(currentPath);
    fetchDirectoryImages(currentPath);
  }, [currentPath, fetchDirectoryContents, fetchDirectoryImages]);

  // Handler for Breadcrumb navigation
  const handleBreadcrumbClick = (path) => {
    setCurrentPath(path);
  };


  // Handler for File/Folder click
  const handleItemClick = (item) => {
      setCurrentPath(item.path);
  };

  return (
    <>
      <Input.Search
        placeholder="Enter a directory path"
        enterButton="Go"
        defaultValue={basePath}
        onSearch={(value) => setCurrentPath(value)}
      />
      <Breadcrumb>
        {/* Generate Breadcrumb items based on the currentPath */}
        <Breadcrumb.Item onClick={() => handleBreadcrumbClick(basePath)}>
          Home (Start at the basePath)
        </Breadcrumb.Item>
        {currentPath.split("/").map((dir, index, array) => {
          const path = array.slice(0, index + 1).join("/");
          return (
            <Breadcrumb.Item
              key={path}
              onClick={() => handleBreadcrumbClick(path)}
            >
              {dir}
            </Breadcrumb.Item>
          );
        })}
      </Breadcrumb>
      <div className="directories-container">
        {folderContents.directories.map((dir) => (
          <div
            key={dir}
            className="directory-item"
            onClick={() => handleItemClick({ path: dir, isDirectory: true })}
          >
            <FolderOutlined />
            <span>{dir.split("/").pop()}</span>
          </div>
        ))}
      </div>
    </>
  );
};

export default LocalFileBrowser;
```

The image.filter is from a different project of mine and as far as I know, in the exact same use case, please do a deep dive analysis and give me the most likely causes and how to fix the error, step by step.