How to type multiple fragments which share the same reference

gistfile1.txt

// Component 1
const fragment1 = graphql`
  fragment Component1fragment1 on User {
    id
  }
`;

function Component1({ user }: { user: Component1fragment1$key }) {
  const data = useFragment(fragment1, user);

  return <div>{user.id}</div>;
}

// Component 2
const fragment2 = graphql`
  fragment Component2fragment2 on User {
    id
  }
`;

function Component2({ user }: { user: Component2fragment2$key }) {
  const data = useFragment(fragment2, user);

  return <div>{user.id}</div>;
}

// Component 3
const fragment3 = graphql`
  fragment Component3fragment3 on User {
    id
  }
`;

function Component3({ user }: { user: Component3fragment3$key }) {
  const data = useFragment(fragment3, user);

  return <div>{user.id}</div>;
}

// Page Component
const query = graphql`
  query TestQuery {
    viewer {
      user {
        ...fragment1
        ...fragment2
        ...fragment3
      }
    }
  }
`;

// user is passed in from the parent component or router
function ExamplePage({ user }: {
    user: ???; // How do I type this so that the fragments dont throw a type error?
}) {
  return (
    <div>
      <Component1 user={data.viewer.user} />
      <Component2 user={data.viewer.user} />
      <Component3 user={data.viewer.user} />
    </div>
  );
}