React rendering an unexpected element

Question

EDIT: I imported something wrong :facepalm:

Let me first run down what code ive written to get this output then I will tell you the expected output and what im confused about

App.jsx

import React from "react";
import Home from "./components/pages/HomePage";
import store from "./ducks/store";
import { Provider } from "react-redux";
import { BrowserRouter, Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Provider store={store}>
        <Switch>
          <Route exact path="/" component={Home} />
        </Switch>
      </Provider>
    </BrowserRouter>
  );
};

export default App;

Home.jsx

import React, { useEffect } from "react";
import FlexBox from "../../shared/FlexBox";
import BlogPostList from "./SortSettings";
import { useSelector, useDispatch } from "react-redux";
import { fetchAllBlogs } from "../../../ducks/blogs";
import {
  getBlogData,
  getBlogPosts,
  getBlogTags,
} from "../../../ducks/selectors";
import SpinLoader from "../../shared/SpinLoader";

const Home = () => {
  const blogData = useSelector((state) => getBlogData(state));
  const blogPosts = useSelector((state) => getBlogPosts(state));
  const blogTags = useSelector((state) => getBlogTags(state));
  const dispatch = useDispatch();

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

  // TODO: handle if blogData.requestError comes back as true

  if (blogData.isLoading || !blogPosts || !blogTags) {
    return (
      <FlexBox
        alignItems="center"
        justifyItems="center"
        width="100vw"
        height="100vh"
      >
        <SpinLoader />
      </FlexBox>
    );
  }

  return (
    <FlexBox height="100vh" width="100vw">
      <BlogPostList blogPosts={blogPosts} />
    </FlexBox>
  );
};

export default Home;

BlogPostList.jsx

import React from "react";
import BlogPost from "./BlogPost";
import FlexBox from "../../shared/FlexBox";

const BlogPostList = ({ blogPosts }) => {
  return (
    <FlexBox flexDirection="column">
      Why in the world is this rendering a SortSettings component AHHHHHH!
    </FlexBox>
  );
};

export default BlogPostList;

Now my question is this why is it that the Home component is rendering a component as showed here https://gyazo.com/8cac1b28bdf72de9010b0b16185943bb what I would expect the Home component to be rendering is a BlogPostList if anyone has an idea help would be appreciated ive been stuck on this for awhile now (im pretty new so this might just be a noob mistake so sorry if its something obvious)