Say I have this simple component, which is working fine:

import clsx from "clsx";
import React from "react";

interface HeadingProps
    extends React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    > {
    tag?: string;
}

const Heading: React.FC<HeadingProps> = ({
    tag = "h2",
    className,
    children,
    ...props
}) => {
    const CustomTag = tag as keyof JSX.IntrinsicElements;
    return (
        <div className={clsx("heading-wrapper", className)} {...props}>
            <CustomTag className="heading">{children}</CustomTag>
        </div>
    );
};

export default Heading;

How can I tell TS or VSCode about the priority of props when I want to use IntelliSense?
Currently it showing me all of the props in this order (alphabetically):

In this scenario I want my custom prop, which is tag, to be on top of other props when I press ctrl + enter. Is there any way to do so? My question might not be even related to TypeScript, but VSCode editor itself.