Is there any way to play around subcontrols inside the parent component with storybook?

I created <Header/> which simply includes three subcomponents and the corresponding Header.stories.tsx.

// Header.tsx

import { styled } from "@mui/material";
import Logo from "../Logo/Logo";
import Gnb from "../Gnb/Gnb";
import Login from "../Login/Login";

const HeaderStyled = styled("div")({
  display: "flex",
  justifyContent: "space-between",
});

export default function Header() {
  return (
    <HeaderStyled>
      <Logo />
      <Gnb />
      <Login />
    </HeaderStyled>
  );
}

// Header.stories.tsx

import { ComponentMeta, ComponentStory } from "@storybook/react";
import Header from "./index";

export default {
  title: "components/Header",
  component: Header,
} as ComponentMeta<typeof Header>;

const Template: ComponentStory<typeof Header> = (args: any) => (
  <Header {...args} />
);

export const Default = Template.bind({});

In the <Logo/> component, it receives the color attribute as props.

import { Stack, Box, Link, Typography } from "@mui/material";
import { Link as RouterLink } from "react-router-dom";

type Props = {
  color?: string;
};

function Logo({ color }: Props) {
  return (
    <Stack>
      <Box component="h1">
        <Link
          component={RouterLink}
          to="/"
          variant="h1"
          sx={{
            display: "flex",
            alignItems: "flex-end",
            pl: 3,
            textDecoration: "none",
          }}
        >
          <Typography variant="h4" color={color}>
            XRCloud
          </Typography>
          <Typography variant="subtitle2" ml={2} color={color}>
            powered by Belivvr
          </Typography>
        </Link>
      </Box>
    </Stack>
  );
}

export default Logo;

Below is the Logo.stories.tsx, and I can change the color of the logo text.

import { ComponentMeta, ComponentStory } from "@storybook/react";
import Logo from "./Logo";

export default {
  title: "Components/Logo",
  component: Logo,
  argTypes: {
    color: {
      name: "color",
      type: { name: "string", required: false },
      defaultValue: "#1976D2",
      description: "pick the color to use",
      table: {
        type: { summary: "string" },
        defaultValue: { summary: "#1976D2" },
      },
      control: {
        type: "color",
      },
    },
  },
} as ComponentMeta<typeof Logo>;

const Template: ComponentStory<typeof Logo> = (args: any) => <Logo {...args} />;

export const Default = Template.bind({});

Default.args = {
  color: "#1976D2",
};

What I expected was I could see all the controls of three subcomponents in the Header.stories.tsx so that I can change the attributes but there are no controls at all like below. Is there any way to add all subcomponents' controls so that I can play around with it inside the story of the parent component?