Reactjs, re-render same components, but different return data

Question

A little hard to explain, but please bear with me.

I have this function Component. The function Component code is almost the same, but how can i simplify my function MyComponent with the return value are different to each pages?

Below is my code and to better understand here is the complete sandbox code https://codesandbox.io/.

import { React, useState, useEffect } from "react";

function MyComponent() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  useEffect(() => {
    fetch(
      "https://api.unsplash.com/search/photos?query=nature?orientation=landscape&client_id=ddIh7_ebg4KwNHzNLf3ePCZb6yIPREJ5jxG3dYgoj6U"
    )
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.results);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <div style={{ textAlign: "left" }}>
        This return has to be dynamic. See the function Home and About below.
      </div>
    );
  }
}

export default MyComponent;

Here is my Home and About pages.

function Home() {
  const [items, setItems] = useState([]);
  return (
    <div>
      <h2>Home</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.user.last_name}</li>
        ))}
      </ul>
    </div>
  );
}

function About() {
  const [items, setItems] = useState([]);
  return (
    <div>
      <h2>About</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.user.first_name}</li>
        ))}
      </ul>
    </div>
  );
}

MyComponent doesn't appear to be rendered in my codesandbox, thats why im asking how can achieve my questions.