BUG: HeadingComponent fixing TS Lint Error

[hvu-dev]

Description

During a new test run, some issues came up in HeadingComponent

• Props type definition is missing from HeadingComponent: like other components props type should be defined with children. Currently children is any type.
• "as" is a duplicated with TypeScript's as keyword: we should change it to some other name (ex: size).
• RENDER_AS_ENUMS.find((item) => item.tag === size) in the if condition is being used to check whether if matched tag can be found. In the next line it's being used again, which make it's possible to be undefined. It can be fixed by creating a constant for this operation and then reuse it.
• item.tag is not usable as it's not JSX.IntrinsicElements type, TypeScript does not recognise it as a valid tag. tag as keyof JSX.IntrinsicElements may be one of the solution for it.

Some logs from the test run:

Binding element 'children' implicitly has an 'any' type.
const Heading = ({ children, as = undefined, customRootClass = '', className = '', ...props }) => {
                          ~~~~~~~~
src/components/ui/Heading/Heading.tsx:37:17 - error TS2339: Property 'tag' does not exist on type '{ label: string; tag: string; } | undefined'.

const { tag: Tag } = RENDER_AS_ENUMS.find((item) => item.tag === as);

src/components/ui/Heading/tests/Heading.test.tsx:10:26 - error TS2322: Type '{ children: string; as: string; }' is not assignable to type 'IntrinsicAttributes & { size?: string | undefined; customRootClass?: string | undefined; className?: string | undefined; } & { children?: ReactNode; }'