How can I show the thumbnail in a relationTo: "media" field?

I have two collections:

and

.

I have a field called "image" in

that relates to

. How do I show the thumbnail while I select?

// Courses Collection
import { CollectionConfig } from "payload/types";

const Courses: CollectionConfig = {
  slug: "courses",
  admin: {
    useAsTitle: "name",
  },
  access: {
    read: () => true,
  },
  fields: [
    {
      name: "name",
      type: "text",
    },
    {
      name: "image",
      type: "relationship",
      relationTo: "media",
    },
  ],
  timestamps: false,
};

export default Courses;

// Media Collection
import path from "path";
import type { CollectionConfig } from "payload/types";

const Media: CollectionConfig = {
  slug: "media",
  upload: {
    staticDir: path.resolve(__dirname, "../../media"),
    // Specify the size name that you'd like to use as admin thumbnail
    adminThumbnail: "thumbnail",
    imageSizes: [
      {
        height: 400,
        width: 400,
        crop: "center",
        name: "thumbnail",
      },
      {
        width: 900,
        height: 450,
        crop: "center",
        name: "sixteenByNineMedium",
      },
    ],
  },
  fields: [
    {
      name: "alt",
      type: "text",
    },
  ],
};

export default Media;