Nested components shouldn't receive {...props} and should accurately create overrideProps string

[hsspain]

Example:

/* eslint-disable */
import React from "react";
import {
  EscapeHatchProps,
  Flex,
  Text,
  getOverrideProps
} from "@aws-amplify/ui-react";

export type SectionHeadingProps = {} & {
  overrides?: EscapeHatchProps | undefined | null
};
export default function SectionHeading(
  props: SectionHeadingProps
): JSX.Element {
  return (
    <Flex
      padding="0px 0px 10px 0px"
      backgroundColor="rgb(255,255,255)"
      direction="column"
      {...props}
      {...getOverrideProps(props.overrides, "Flex")}
    >
      <Flex
        padding="0px 0px 0px 0px"
        backgroundColor="rgb(255,255,255)"
        flexGrow="0"
        alignItems="flex-start"
        gap="10px"
        direction="row"
        {...props}
        {...getOverrideProps(props.overrides, "Flex")}
      >
        <Text
          fontFamily="Inter"
          color="rgb(15.539060980081558,29.73937589675188,47.8125)"
          textAlign="left"
          fontSize="48px"
          lineHeight="48px"
          value="Heading 2"
          fontWeight="300"
          {...props}
          {...getOverrideProps(props.overrides, "Text")}
        >
          Heading 2
        </Text>
      </Flex>
      <Text
        fontFamily="Inter"
        color="rgb(0,0,0)"
        textAlign="left"
        fontSize="32px"
        lineHeight="48px"
        value="subtitle"
        fontWeight="400"
        {...props}
        {...getOverrideProps(props.overrides, "Text")}
      >
        subtitle
      </Text>
    </Flex>
  );
}

Should be:

Example:

/* eslint-disable */
import React from "react";
import {
  EscapeHatchProps,
  Flex,
  Text,
  getOverrideProps
} from "@aws-amplify/ui-react";

export type SectionHeadingProps = {} & {
  overrides?: EscapeHatchProps | undefined | null
};
export default function SectionHeading(
  props: SectionHeadingProps
): JSX.Element {
  return (
    <Flex
      padding="0px 0px 10px 0px"
      backgroundColor="rgb(255,255,255)"
      direction="column"
      {...props}
      {...getOverrideProps(props.overrides, "Flex")}
    >
      <Flex
        padding="0px 0px 0px 0px"
        backgroundColor="rgb(255,255,255)"
        flexGrow="0"
        alignItems="flex-start"
        gap="10px"
        direction="row"
        {...props}
        {...getOverrideProps(props.overrides, "Flex.Flex")}
      >
        <Text
          fontFamily="Inter"
          color="rgb(15.539060980081558,29.73937589675188,47.8125)"
          textAlign="left"
          fontSize="48px"
          lineHeight="48px"
          value="Heading 2"
          fontWeight="300"
          {...getOverrideProps(props.overrides, "Flex.Flex.Text")}
        >
          Heading 2
        </Text>
      </Flex>
      <Text
        fontFamily="Inter"
        color="rgb(0,0,0)"
        textAlign="left"
        fontSize="32px"
        lineHeight="48px"
        value="subtitle"
        fontWeight="400"
        {...getOverrideProps(props.overrides, "Flex.Text")}
      >
        subtitle
      </Text>
    </Flex>
  );
}