Element type is invalid: expected a string (for built-in components) or a class/function but got: object. Why can't I return an object?

Question

I have two .js files and cannot figure out what the importing issue is. I've looked at examples and it all looks okay to me, but when I run npm starts it throws the familiar error of

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `AboutUs`.

These are the files:

AboutUs.js

import React from "react";
import AboutSection from "../components/AboutSection";

const AboutUs = () => {
  return (
    <div>
      <AboutSection />
    </div>
  );
};

export default AboutUs;

AboutSection.js

import React from "react";
import home1 from "../img/home1.png";

// 1. AboutSection is a functional component written using an arrow function
const AboutSection = () => {
  return (
    <div>
      <div className="description">
        <div className="title">
          <div className="hide">
            <h2>We work to make</h2>
          </div>
          <div>
            <h2>
              your <span>dreams</span> come
            </h2>
          </div>
          <div className="hide">
            <h2>true.</h2>
          </div>
        </div>
        <p>
          Contact us for any photography or videography ideas that you have. We
          have professionals with amazing skills.
        </p>
        <button>Contact Us</button>
      </div>
      <div className="image">
        <img src={home1} alt="guy with a camera" />
      </div>
    </div>
  );
};

export default AboutSection;

Then in App.js I have:

import React from "react";
// import pages
import AboutUs from "./pages/AboutUs";

function App() {
  return (
    <div className="App">
      <AboutUs />
    </div>
  );
}

export default App;

Thank you!