React / Typescript Dynamic tag with intellisense autocomplete

Box.tsx

import { ReactNode, ElementType, ComponentPropsWithoutRef } from "react";

export type Prefer<P, T> = P & Omit<T, keyof P>;

export type ElementPropsWithoutRef<T extends ElementType> = Pick<
  ComponentPropsWithoutRef<T>,
  keyof ComponentPropsWithoutRef<T>
>;

export type OverwritableType<OwnProps, Type extends ElementType> = Prefer<
  OwnProps,
  ElementPropsWithoutRef<Type>
>;
interface Props<T> {
  as?: T;
  children?: ReactNode;
}
// 'button' is a default value
function Box<T extends ElementType = "button">({
  as,
  children,
  ...rest
}: OverwritableType<Props<T>, T>) {
  const Tag: ElementType = as;
  return (
    <Tag {...rest}>
      {children}
    </Tag>
  );
}

export default Box;