Am I missing the point of using `use` for data fetching with server components?

// page.tsx
import { fetchMessage } from './lib';
import { Message } from './message';

export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

// message.tsx
'use client';

import { use } from 'react';

export function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

// page.tsx
import { Message } from './message';

export default function App() {
  return (
    <Suspense fallback={<p>waiting for message...</p>}>
      <Message />
    </Suspense>
  );
}

// message.tsx
import { fetchMessage } from './lib';

export async function Message() {
  const messageContent = await fetchMessage()
  return <p>Here is the message: {messageContent}</p>;
}