diff --git a/src/AbstractModalHeader.tsx b/src/AbstractModalHeader.tsx
index af67735212..7c35c4b8bf 100644
--- a/src/AbstractModalHeader.tsx
+++ b/src/AbstractModalHeader.tsx
@@ -39,17 +39,19 @@ const propTypes = {
   onHide: PropTypes.func,
 };
 
-const defaultProps = {
-  closeLabel: 'Close',
-  closeButton: false,
-};
-
 const AbstractModalHeader = React.forwardRef<
   HTMLDivElement,
   AbstractModalHeaderProps
 >(
   (
-    { closeLabel, closeVariant, closeButton, onHide, children, ...props },
+    {
+      closeLabel = 'Close',
+      closeVariant,
+      closeButton = false,
+      onHide,
+      children,
+      ...props
+    },
     ref,
   ) => {
     const context = useContext(ModalContext);
@@ -76,6 +78,5 @@ const AbstractModalHeader = React.forwardRef<
 );
 
 AbstractModalHeader.propTypes = propTypes;
-AbstractModalHeader.defaultProps = defaultProps;
 
 export default AbstractModalHeader;
diff --git a/src/Alert.tsx b/src/Alert.tsx
index 631716a08c..c30064364d 100644
--- a/src/Alert.tsx
+++ b/src/Alert.tsx
@@ -86,26 +86,19 @@ const propTypes = {
   transition: PropTypes.oneOfType([PropTypes.bool, elementType]),
 };
 
-const defaultProps = {
-  variant: 'primary',
-  show: true,
-  transition: Fade,
-  closeLabel: 'Close alert',
-};
-
 const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
   (uncontrolledProps: AlertProps, ref) => {
     const {
       bsPrefix,
-      show,
-      closeLabel,
+      show = true,
+      closeLabel = 'Close alert',
       closeVariant,
       className,
       children,
-      variant,
+      variant = 'primary',
       onClose,
       dismissible,
-      transition,
+      transition = Fade,
       ...props
     } = useUncontrolled(uncontrolledProps, {
       show: 'onClose',
@@ -152,7 +145,6 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
 );
 
 Alert.displayName = 'Alert';
-Alert.defaultProps = defaultProps;
 Alert.propTypes = propTypes;
 
 export default Object.assign(Alert, {
diff --git a/src/Badge.tsx b/src/Badge.tsx
index 81840c57c9..86f10ffbe8 100644
--- a/src/Badge.tsx
+++ b/src/Badge.tsx
@@ -42,15 +42,18 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  bg: 'primary',
-  pill: false,
-};
-
 const Badge: BsPrefixRefForwardingComponent<'span', BadgeProps> =
   React.forwardRef<HTMLElement, BadgeProps>(
     (
-      { bsPrefix, bg, pill, text, className, as: Component = 'span', ...props },
+      {
+        bsPrefix,
+        bg = 'primary',
+        pill = false,
+        text,
+        className,
+        as: Component = 'span',
+        ...props
+      },
       ref,
     ) => {
       const prefix = useBootstrapPrefix(bsPrefix, 'badge');
@@ -72,6 +75,5 @@ const Badge: BsPrefixRefForwardingComponent<'span', BadgeProps> =
 
 Badge.displayName = 'Badge';
 Badge.propTypes = propTypes;
-Badge.defaultProps = defaultProps;
 
 export default Badge;
diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx
index a36c738bbb..fde8b5fa02 100644
--- a/src/Breadcrumb.tsx
+++ b/src/Breadcrumb.tsx
@@ -33,20 +33,15 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  label: 'breadcrumb',
-  listProps: {},
-};
-
 const Breadcrumb: BsPrefixRefForwardingComponent<'nav', BreadcrumbProps> =
   React.forwardRef<HTMLElement, BreadcrumbProps>(
     (
       {
         bsPrefix,
         className,
-        listProps,
+        listProps = {},
         children,
-        label,
+        label = 'breadcrumb',
         // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
         as: Component = 'nav',
         ...props
@@ -75,7 +70,6 @@ const Breadcrumb: BsPrefixRefForwardingComponent<'nav', BreadcrumbProps> =
 
 Breadcrumb.displayName = 'Breadcrumb';
 Breadcrumb.propTypes = propTypes;
-Breadcrumb.defaultProps = defaultProps;
 
 export default Object.assign(Breadcrumb, {
   Item: BreadcrumbItem,
diff --git a/src/BreadcrumbItem.tsx b/src/BreadcrumbItem.tsx
index 17c1feca2d..fd3a31b530 100644
--- a/src/BreadcrumbItem.tsx
+++ b/src/BreadcrumbItem.tsx
@@ -50,11 +50,6 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  active: false,
-  linkProps: {},
-};
-
 const BreadcrumbItem: BsPrefixRefForwardingComponent<
   'li',
   BreadcrumbItemProps
@@ -62,13 +57,13 @@ const BreadcrumbItem: BsPrefixRefForwardingComponent<
   (
     {
       bsPrefix,
-      active,
+      active = false,
       children,
       className,
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
       as: Component = 'li',
       linkAs: LinkComponent = Anchor,
-      linkProps,
+      linkProps = {},
       href,
       title,
       target,
@@ -104,6 +99,5 @@ const BreadcrumbItem: BsPrefixRefForwardingComponent<
 
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 BreadcrumbItem.propTypes = propTypes;
-BreadcrumbItem.defaultProps = defaultProps;
 
 export default BreadcrumbItem;
diff --git a/src/Button.tsx b/src/Button.tsx
index 4f3c8205e2..49e336c2fb 100644
--- a/src/Button.tsx
+++ b/src/Button.tsx
@@ -67,18 +67,25 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  variant: 'primary',
-  active: false,
-  disabled: false,
-};
-
 const Button: BsPrefixRefForwardingComponent<'button', ButtonProps> =
   React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ as, bsPrefix, variant, size, active, className, ...props }, ref) => {
+    (
+      {
+        as,
+        bsPrefix,
+        variant = 'primary',
+        size,
+        active = false,
+        disabled = false,
+        className,
+        ...props
+      },
+      ref,
+    ) => {
       const prefix = useBootstrapPrefix(bsPrefix, 'btn');
       const [buttonProps, { tagName }] = useButtonProps({
         tagName: as,
+        disabled,
         ...props,
       });
 
@@ -89,13 +96,14 @@ const Button: BsPrefixRefForwardingComponent<'button', ButtonProps> =
           {...buttonProps}
           {...props}
           ref={ref}
+          disabled={disabled}
           className={classNames(
             className,
             prefix,
             active && 'active',
             variant && `${prefix}-${variant}`,
             size && `${prefix}-${size}`,
-            props.href && props.disabled && 'disabled',
+            props.href && disabled && 'disabled',
           )}
         />
       );
@@ -104,6 +112,5 @@ const Button: BsPrefixRefForwardingComponent<'button', ButtonProps> =
 
 Button.displayName = 'Button';
 Button.propTypes = propTypes;
-Button.defaultProps = defaultProps;
 
 export default Button;
diff --git a/src/ButtonGroup.tsx b/src/ButtonGroup.tsx
index 8fdfc06dc3..e7af5bd469 100644
--- a/src/ButtonGroup.tsx
+++ b/src/ButtonGroup.tsx
@@ -38,23 +38,19 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  vertical: false,
-  role: 'group',
-};
-
 const ButtonGroup: BsPrefixRefForwardingComponent<'div', ButtonGroupProps> =
   React.forwardRef(
     (
       {
         bsPrefix,
         size,
-        vertical,
+        vertical = false,
         className,
+        role = 'group',
         // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
         as: Component = 'div',
         ...rest
-      }: ButtonGroupProps,
+      },
       ref,
     ) => {
       const prefix = useBootstrapPrefix(bsPrefix, 'btn-group');
@@ -66,6 +62,7 @@ const ButtonGroup: BsPrefixRefForwardingComponent<'div', ButtonGroupProps> =
         <Component
           {...rest}
           ref={ref}
+          role={role}
           className={classNames(
             className,
             baseClass,
@@ -78,6 +75,5 @@ const ButtonGroup: BsPrefixRefForwardingComponent<'div', ButtonGroupProps> =
 
 ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = propTypes;
-ButtonGroup.defaultProps = defaultProps;
 
 export default ButtonGroup;
diff --git a/src/ButtonToolbar.tsx b/src/ButtonToolbar.tsx
index d95b68dec3..3feca2292d 100644
--- a/src/ButtonToolbar.tsx
+++ b/src/ButtonToolbar.tsx
@@ -24,21 +24,22 @@ const propTypes = {
   role: PropTypes.string,
 };
 
-const defaultProps = {
-  role: 'toolbar',
-};
-
 const ButtonToolbar = React.forwardRef<HTMLDivElement, ButtonToolbarProps>(
-  ({ bsPrefix, className, ...props }, ref) => {
+  ({ bsPrefix, className, role = 'toolbar', ...props }, ref) => {
     const prefix = useBootstrapPrefix(bsPrefix, 'btn-toolbar');
 
     return (
-      <div {...props} ref={ref} className={classNames(className, prefix)} />
+      <div
+        {...props}
+        ref={ref}
+        className={classNames(className, prefix)}
+        role={role}
+      />
     );
   },
 );
 
 ButtonToolbar.displayName = 'ButtonToolbar';
 ButtonToolbar.propTypes = propTypes;
-ButtonToolbar.defaultProps = defaultProps;
+
 export default ButtonToolbar;
diff --git a/src/Card.tsx b/src/Card.tsx
index eef09bb25d..966d1b053a 100644
--- a/src/Card.tsx
+++ b/src/Card.tsx
@@ -69,10 +69,6 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  body: false,
-};
-
 const Card: BsPrefixRefForwardingComponent<'div', CardProps> = React.forwardRef<
   HTMLElement,
   CardProps
@@ -84,7 +80,7 @@ const Card: BsPrefixRefForwardingComponent<'div', CardProps> = React.forwardRef<
       bg,
       text,
       border,
-      body,
+      body = false,
       children,
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
       as: Component = 'div',
@@ -114,7 +110,6 @@ const Card: BsPrefixRefForwardingComponent<'div', CardProps> = React.forwardRef<
 
 Card.displayName = 'Card';
 Card.propTypes = propTypes;
-Card.defaultProps = defaultProps;
 
 export default Object.assign(Card, {
   Img: CardImg,
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
index 5b396841e6..71e16c401d 100644
--- a/src/Carousel.tsx
+++ b/src/Carousel.tsx
@@ -175,26 +175,6 @@ const propTypes = {
   variant: PropTypes.oneOf<CarouselVariant>(['dark']),
 };
 
-const defaultProps = {
-  slide: true,
-  fade: false,
-  controls: true,
-  indicators: true,
-  indicatorLabels: [],
-  defaultActiveIndex: 0,
-  interval: 5000,
-  keyboard: true,
-  pause: 'hover' as CarouselProps['pause'],
-  wrap: true,
-  touch: true,
-
-  prevIcon: <span aria-hidden="true" className="carousel-control-prev-icon" />,
-  prevLabel: 'Previous',
-
-  nextIcon: <span aria-hidden="true" className="carousel-control-next-icon" />,
-  nextLabel: 'Next',
-};
-
 function isVisible(element) {
   if (
     !element ||
@@ -215,433 +195,443 @@ function isVisible(element) {
 }
 
 const Carousel: BsPrefixRefForwardingComponent<'div', CarouselProps> =
-  React.forwardRef<CarouselRef, CarouselProps>((uncontrolledProps, ref) => {
-    const {
-      // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-      as: Component = 'div',
-      bsPrefix,
-      slide,
-      fade,
-      controls,
-      indicators,
-      indicatorLabels,
-      activeIndex,
-      onSelect,
-      onSlide,
-      onSlid,
-      interval,
-      keyboard,
-      onKeyDown,
-      pause,
-      onMouseOver,
-      onMouseOut,
-      wrap,
-      touch,
-      onTouchStart,
-      onTouchMove,
-      onTouchEnd,
-      prevIcon,
-      prevLabel,
-      nextIcon,
-      nextLabel,
-      variant,
-      className,
-      children,
-      ...props
-    } = useUncontrolled(uncontrolledProps, {
-      activeIndex: 'onSelect',
-    });
-
-    const prefix = useBootstrapPrefix(bsPrefix, 'carousel');
-    const isRTL = useIsRTL();
-
-    const nextDirectionRef = useRef<string | null>(null);
-    const [direction, setDirection] = useState('next');
-    const [paused, setPaused] = useState(false);
-    const [isSliding, setIsSliding] = useState(false);
-    const [renderedActiveIndex, setRenderedActiveIndex] = useState<number>(
-      activeIndex || 0,
-    );
-
-    useEffect(() => {
-      if (!isSliding && activeIndex !== renderedActiveIndex) {
+  React.forwardRef<CarouselRef, CarouselProps>(
+    ({ defaultActiveIndex = 0, ...uncontrolledProps }, ref) => {
+      const {
+        // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
+        as: Component = 'div',
+        bsPrefix,
+        slide = true,
+        fade = false,
+        controls = true,
+        indicators = true,
+        indicatorLabels = [],
+        activeIndex,
+        onSelect,
+        onSlide,
+        onSlid,
+        interval = 5000,
+        keyboard = true,
+        onKeyDown,
+        pause = 'hover',
+        onMouseOver,
+        onMouseOut,
+        wrap = true,
+        touch = true,
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        prevIcon = (
+          <span aria-hidden="true" className="carousel-control-prev-icon" />
+        ),
+        prevLabel = 'Previous',
+        nextIcon = (
+          <span aria-hidden="true" className="carousel-control-next-icon" />
+        ),
+        nextLabel = 'Next',
+        variant,
+        className,
+        children,
+        ...props
+      } = useUncontrolled(
+        { defaultActiveIndex, ...uncontrolledProps },
+        {
+          activeIndex: 'onSelect',
+        },
+      );
+
+      const prefix = useBootstrapPrefix(bsPrefix, 'carousel');
+      const isRTL = useIsRTL();
+
+      const nextDirectionRef = useRef<string | null>(null);
+      const [direction, setDirection] = useState('next');
+      const [paused, setPaused] = useState(false);
+      const [isSliding, setIsSliding] = useState(false);
+      const [renderedActiveIndex, setRenderedActiveIndex] = useState<number>(
+        activeIndex || 0,
+      );
+
+      useEffect(() => {
+        if (!isSliding && activeIndex !== renderedActiveIndex) {
+          if (nextDirectionRef.current) {
+            setDirection(nextDirectionRef.current);
+          } else {
+            setDirection(
+              (activeIndex || 0) > renderedActiveIndex ? 'next' : 'prev',
+            );
+          }
+
+          if (slide) {
+            setIsSliding(true);
+          }
+
+          setRenderedActiveIndex(activeIndex || 0);
+        }
+      }, [activeIndex, isSliding, renderedActiveIndex, slide]);
+
+      useEffect(() => {
         if (nextDirectionRef.current) {
-          setDirection(nextDirectionRef.current);
-        } else {
-          setDirection(
-            (activeIndex || 0) > renderedActiveIndex ? 'next' : 'prev',
-          );
+          nextDirectionRef.current = null;
         }
+      });
 
-        if (slide) {
-          setIsSliding(true);
+      let numChildren = 0;
+      let activeChildInterval: number | undefined;
+
+      // Iterate to grab all of the children's interval values
+      // (and count them, too)
+      forEach(children, (child, index) => {
+        ++numChildren;
+        if (index === activeIndex) {
+          activeChildInterval = child.props.interval as number | undefined;
         }
+      });
 
-        setRenderedActiveIndex(activeIndex || 0);
-      }
-    }, [activeIndex, isSliding, renderedActiveIndex, slide]);
+      const activeChildIntervalRef = useCommittedRef(activeChildInterval);
 
-    useEffect(() => {
-      if (nextDirectionRef.current) {
-        nextDirectionRef.current = null;
-      }
-    });
+      const prev = useCallback(
+        (event?) => {
+          if (isSliding) {
+            return;
+          }
 
-    let numChildren = 0;
-    let activeChildInterval: number | undefined;
+          let nextActiveIndex = renderedActiveIndex - 1;
+          if (nextActiveIndex < 0) {
+            if (!wrap) {
+              return;
+            }
 
-    // Iterate to grab all of the children's interval values
-    // (and count them, too)
-    forEach(children, (child, index) => {
-      ++numChildren;
-      if (index === activeIndex) {
-        activeChildInterval = child.props.interval as number | undefined;
-      }
-    });
+            nextActiveIndex = numChildren - 1;
+          }
 
-    const activeChildIntervalRef = useCommittedRef(activeChildInterval);
+          nextDirectionRef.current = 'prev';
+          onSelect?.(nextActiveIndex, event);
+        },
+        [isSliding, renderedActiveIndex, onSelect, wrap, numChildren],
+      );
 
-    const prev = useCallback(
-      (event?) => {
+      // This is used in the setInterval, so it should not invalidate.
+      const next = useEventCallback((event?) => {
         if (isSliding) {
           return;
         }
 
-        let nextActiveIndex = renderedActiveIndex - 1;
-        if (nextActiveIndex < 0) {
+        let nextActiveIndex = renderedActiveIndex + 1;
+        if (nextActiveIndex >= numChildren) {
           if (!wrap) {
             return;
           }
 
-          nextActiveIndex = numChildren - 1;
+          nextActiveIndex = 0;
         }
 
-        nextDirectionRef.current = 'prev';
+        nextDirectionRef.current = 'next';
+
         onSelect?.(nextActiveIndex, event);
-      },
-      [isSliding, renderedActiveIndex, onSelect, wrap, numChildren],
-    );
-
-    // This is used in the setInterval, so it should not invalidate.
-    const next = useEventCallback((event?) => {
-      if (isSliding) {
-        return;
-      }
-
-      let nextActiveIndex = renderedActiveIndex + 1;
-      if (nextActiveIndex >= numChildren) {
-        if (!wrap) {
-          return;
+      });
+
+      const elementRef = useRef<HTMLElement>();
+
+      useImperativeHandle(ref, () => ({
+        element: elementRef.current,
+        prev,
+        next,
+      }));
+
+      // This is used in the setInterval, so it should not invalidate.
+      const nextWhenVisible = useEventCallback(() => {
+        if (!document.hidden && isVisible(elementRef.current)) {
+          if (isRTL) {
+            prev();
+          } else {
+            next();
+          }
         }
+      });
 
-        nextActiveIndex = 0;
-      }
-
-      nextDirectionRef.current = 'next';
+      const slideDirection = direction === 'next' ? 'start' : 'end';
 
-      onSelect?.(nextActiveIndex, event);
-    });
-
-    const elementRef = useRef<HTMLElement>();
-
-    useImperativeHandle(ref, () => ({
-      element: elementRef.current,
-      prev,
-      next,
-    }));
-
-    // This is used in the setInterval, so it should not invalidate.
-    const nextWhenVisible = useEventCallback(() => {
-      if (!document.hidden && isVisible(elementRef.current)) {
-        if (isRTL) {
-          prev();
-        } else {
-          next();
+      useUpdateEffect(() => {
+        if (slide) {
+          // These callbacks will be handled by the <Transition> callbacks.
+          return;
         }
-      }
-    });
 
-    const slideDirection = direction === 'next' ? 'start' : 'end';
+        onSlide?.(renderedActiveIndex, slideDirection);
+        onSlid?.(renderedActiveIndex, slideDirection);
+      }, [renderedActiveIndex]);
 
-    useUpdateEffect(() => {
-      if (slide) {
-        // These callbacks will be handled by the <Transition> callbacks.
-        return;
-      }
+      const orderClassName = `${prefix}-item-${direction}`;
+      const directionalClassName = `${prefix}-item-${slideDirection}`;
 
-      onSlide?.(renderedActiveIndex, slideDirection);
-      onSlid?.(renderedActiveIndex, slideDirection);
-    }, [renderedActiveIndex]);
+      const handleEnter = useCallback(
+        (node) => {
+          triggerBrowserReflow(node);
 
-    const orderClassName = `${prefix}-item-${direction}`;
-    const directionalClassName = `${prefix}-item-${slideDirection}`;
+          onSlide?.(renderedActiveIndex, slideDirection);
+        },
+        [onSlide, renderedActiveIndex, slideDirection],
+      );
 
-    const handleEnter = useCallback(
-      (node) => {
-        triggerBrowserReflow(node);
+      const handleEntered = useCallback(() => {
+        setIsSliding(false);
+
+        onSlid?.(renderedActiveIndex, slideDirection);
+      }, [onSlid, renderedActiveIndex, slideDirection]);
+
+      const handleKeyDown = useCallback(
+        (event) => {
+          if (keyboard && !/input|textarea/i.test(event.target.tagName)) {
+            switch (event.key) {
+              case 'ArrowLeft':
+                event.preventDefault();
+                if (isRTL) {
+                  next(event);
+                } else {
+                  prev(event);
+                }
+                return;
+              case 'ArrowRight':
+                event.preventDefault();
+                if (isRTL) {
+                  prev(event);
+                } else {
+                  next(event);
+                }
+                return;
+              default:
+            }
+          }
 
-        onSlide?.(renderedActiveIndex, slideDirection);
-      },
-      [onSlide, renderedActiveIndex, slideDirection],
-    );
-
-    const handleEntered = useCallback(() => {
-      setIsSliding(false);
-
-      onSlid?.(renderedActiveIndex, slideDirection);
-    }, [onSlid, renderedActiveIndex, slideDirection]);
-
-    const handleKeyDown = useCallback(
-      (event) => {
-        if (keyboard && !/input|textarea/i.test(event.target.tagName)) {
-          switch (event.key) {
-            case 'ArrowLeft':
-              event.preventDefault();
-              if (isRTL) {
-                next(event);
-              } else {
-                prev(event);
-              }
-              return;
-            case 'ArrowRight':
-              event.preventDefault();
-              if (isRTL) {
-                prev(event);
-              } else {
-                next(event);
-              }
-              return;
-            default:
+          onKeyDown?.(event);
+        },
+        [keyboard, onKeyDown, prev, next, isRTL],
+      );
+
+      const handleMouseOver = useCallback(
+        (event) => {
+          if (pause === 'hover') {
+            setPaused(true);
           }
-        }
 
-        onKeyDown?.(event);
-      },
-      [keyboard, onKeyDown, prev, next, isRTL],
-    );
+          onMouseOver?.(event);
+        },
+        [pause, onMouseOver],
+      );
 
-    const handleMouseOver = useCallback(
-      (event) => {
-        if (pause === 'hover') {
-          setPaused(true);
-        }
+      const handleMouseOut = useCallback(
+        (event) => {
+          setPaused(false);
 
-        onMouseOver?.(event);
-      },
-      [pause, onMouseOver],
-    );
+          onMouseOut?.(event);
+        },
+        [onMouseOut],
+      );
 
-    const handleMouseOut = useCallback(
-      (event) => {
-        setPaused(false);
+      const touchStartXRef = useRef(0);
+      const touchDeltaXRef = useRef(0);
+      const touchUnpauseTimeout = useTimeout();
 
-        onMouseOut?.(event);
-      },
-      [onMouseOut],
-    );
+      const handleTouchStart = useCallback(
+        (event) => {
+          touchStartXRef.current = event.touches[0].clientX;
+          touchDeltaXRef.current = 0;
 
-    const touchStartXRef = useRef(0);
-    const touchDeltaXRef = useRef(0);
-    const touchUnpauseTimeout = useTimeout();
+          if (pause === 'hover') {
+            setPaused(true);
+          }
 
-    const handleTouchStart = useCallback(
-      (event) => {
-        touchStartXRef.current = event.touches[0].clientX;
-        touchDeltaXRef.current = 0;
+          onTouchStart?.(event);
+        },
+        [pause, onTouchStart],
+      );
 
-        if (pause === 'hover') {
-          setPaused(true);
-        }
+      const handleTouchMove = useCallback(
+        (event) => {
+          if (event.touches && event.touches.length > 1) {
+            touchDeltaXRef.current = 0;
+          } else {
+            touchDeltaXRef.current =
+              event.touches[0].clientX - touchStartXRef.current;
+          }
 
-        onTouchStart?.(event);
-      },
-      [pause, onTouchStart],
-    );
+          onTouchMove?.(event);
+        },
+        [onTouchMove],
+      );
 
-    const handleTouchMove = useCallback(
-      (event) => {
-        if (event.touches && event.touches.length > 1) {
-          touchDeltaXRef.current = 0;
-        } else {
-          touchDeltaXRef.current =
-            event.touches[0].clientX - touchStartXRef.current;
-        }
+      const handleTouchEnd = useCallback(
+        (event) => {
+          if (touch) {
+            const touchDeltaX = touchDeltaXRef.current;
 
-        onTouchMove?.(event);
-      },
-      [onTouchMove],
-    );
-
-    const handleTouchEnd = useCallback(
-      (event) => {
-        if (touch) {
-          const touchDeltaX = touchDeltaXRef.current;
-
-          if (Math.abs(touchDeltaX) > SWIPE_THRESHOLD) {
-            if (touchDeltaX > 0) {
-              prev(event);
-            } else {
-              next(event);
+            if (Math.abs(touchDeltaX) > SWIPE_THRESHOLD) {
+              if (touchDeltaX > 0) {
+                prev(event);
+              } else {
+                next(event);
+              }
             }
           }
-        }
 
-        if (pause === 'hover') {
-          touchUnpauseTimeout.set(() => {
-            setPaused(false);
-          }, interval || undefined);
-        }
+          if (pause === 'hover') {
+            touchUnpauseTimeout.set(() => {
+              setPaused(false);
+            }, interval || undefined);
+          }
+
+          onTouchEnd?.(event);
+        },
+        [touch, pause, prev, next, touchUnpauseTimeout, interval, onTouchEnd],
+      );
 
-        onTouchEnd?.(event);
-      },
-      [touch, pause, prev, next, touchUnpauseTimeout, interval, onTouchEnd],
-    );
+      const shouldPlay = interval != null && !paused && !isSliding;
 
-    const shouldPlay = interval != null && !paused && !isSliding;
+      const intervalHandleRef = useRef<number | null>();
 
-    const intervalHandleRef = useRef<number | null>();
+      useEffect(() => {
+        if (!shouldPlay) {
+          return undefined;
+        }
 
-    useEffect(() => {
-      if (!shouldPlay) {
-        return undefined;
-      }
+        const nextFunc = isRTL ? prev : next;
+        intervalHandleRef.current = window.setInterval(
+          document.visibilityState ? nextWhenVisible : nextFunc,
+          activeChildIntervalRef.current ?? interval ?? undefined,
+        );
 
-      const nextFunc = isRTL ? prev : next;
-      intervalHandleRef.current = window.setInterval(
-        document.visibilityState ? nextWhenVisible : nextFunc,
-        activeChildIntervalRef.current ?? interval ?? undefined,
+        return () => {
+          if (intervalHandleRef.current !== null) {
+            clearInterval(intervalHandleRef.current);
+          }
+        };
+      }, [
+        shouldPlay,
+        prev,
+        next,
+        activeChildIntervalRef,
+        interval,
+        nextWhenVisible,
+        isRTL,
+      ]);
+
+      const indicatorOnClicks = useMemo(
+        () =>
+          indicators &&
+          Array.from({ length: numChildren }, (_, index) => (event) => {
+            onSelect?.(index, event);
+          }),
+        [indicators, numChildren, onSelect],
       );
 
-      return () => {
-        if (intervalHandleRef.current !== null) {
-          clearInterval(intervalHandleRef.current);
-        }
-      };
-    }, [
-      shouldPlay,
-      prev,
-      next,
-      activeChildIntervalRef,
-      interval,
-      nextWhenVisible,
-      isRTL,
-    ]);
-
-    const indicatorOnClicks = useMemo(
-      () =>
-        indicators &&
-        Array.from({ length: numChildren }, (_, index) => (event) => {
-          onSelect?.(index, event);
-        }),
-      [indicators, numChildren, onSelect],
-    );
-
-    return (
-      <Component
-        ref={elementRef}
-        {...props}
-        onKeyDown={handleKeyDown}
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
-        className={classNames(
-          className,
-          prefix,
-          slide && 'slide',
-          fade && `${prefix}-fade`,
-          variant && `${prefix}-${variant}`,
-        )}
-      >
-        {indicators && (
-          <div className={`${prefix}-indicators`}>
-            {map(children, (_, index) => (
-              <button
-                key={index}
-                type="button"
-                data-bs-target="" // Bootstrap requires this in their css.
-                aria-label={
-                  indicatorLabels?.length
-                    ? indicatorLabels[index]
-                    : `Slide ${index + 1}`
-                }
-                className={index === renderedActiveIndex ? 'active' : undefined}
-                onClick={
-                  indicatorOnClicks ? indicatorOnClicks[index] : undefined
-                }
-                aria-current={index === renderedActiveIndex}
-              />
-            ))}
+      return (
+        <Component
+          ref={elementRef}
+          {...props}
+          onKeyDown={handleKeyDown}
+          onMouseOver={handleMouseOver}
+          onMouseOut={handleMouseOut}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          className={classNames(
+            className,
+            prefix,
+            slide && 'slide',
+            fade && `${prefix}-fade`,
+            variant && `${prefix}-${variant}`,
+          )}
+        >
+          {indicators && (
+            <div className={`${prefix}-indicators`}>
+              {map(children, (_, index) => (
+                <button
+                  key={index}
+                  type="button"
+                  data-bs-target="" // Bootstrap requires this in their css.
+                  aria-label={
+                    indicatorLabels?.length
+                      ? indicatorLabels[index]
+                      : `Slide ${index + 1}`
+                  }
+                  className={
+                    index === renderedActiveIndex ? 'active' : undefined
+                  }
+                  onClick={
+                    indicatorOnClicks ? indicatorOnClicks[index] : undefined
+                  }
+                  aria-current={index === renderedActiveIndex}
+                />
+              ))}
+            </div>
+          )}
+
+          <div className={`${prefix}-inner`}>
+            {map(children, (child, index) => {
+              const isActive = index === renderedActiveIndex;
+
+              return slide ? (
+                <TransitionWrapper
+                  in={isActive}
+                  onEnter={isActive ? handleEnter : undefined}
+                  onEntered={isActive ? handleEntered : undefined}
+                  addEndListener={transitionEndListener}
+                >
+                  {(
+                    status: TransitionStatus,
+                    innerProps: Record<string, unknown>,
+                  ) =>
+                    React.cloneElement(child, {
+                      ...innerProps,
+                      className: classNames(
+                        child.props.className,
+                        isActive && status !== 'entered' && orderClassName,
+                        (status === 'entered' || status === 'exiting') &&
+                          'active',
+                        (status === 'entering' || status === 'exiting') &&
+                          directionalClassName,
+                      ),
+                    })
+                  }
+                </TransitionWrapper>
+              ) : (
+                React.cloneElement(child, {
+                  className: classNames(
+                    child.props.className,
+                    isActive && 'active',
+                  ),
+                })
+              );
+            })}
           </div>
-        )}
-
-        <div className={`${prefix}-inner`}>
-          {map(children, (child, index) => {
-            const isActive = index === renderedActiveIndex;
-
-            return slide ? (
-              <TransitionWrapper
-                in={isActive}
-                onEnter={isActive ? handleEnter : undefined}
-                onEntered={isActive ? handleEntered : undefined}
-                addEndListener={transitionEndListener}
-              >
-                {(
-                  status: TransitionStatus,
-                  innerProps: Record<string, unknown>,
-                ) =>
-                  React.cloneElement(child, {
-                    ...innerProps,
-                    className: classNames(
-                      child.props.className,
-                      isActive && status !== 'entered' && orderClassName,
-                      (status === 'entered' || status === 'exiting') &&
-                        'active',
-                      (status === 'entering' || status === 'exiting') &&
-                        directionalClassName,
-                    ),
-                  })
-                }
-              </TransitionWrapper>
-            ) : (
-              React.cloneElement(child, {
-                className: classNames(
-                  child.props.className,
-                  isActive && 'active',
-                ),
-              })
-            );
-          })}
-        </div>
-
-        {controls && (
-          <>
-            {(wrap || activeIndex !== 0) && (
-              <Anchor className={`${prefix}-control-prev`} onClick={prev}>
-                {prevIcon}
-                {prevLabel && (
-                  <span className="visually-hidden">{prevLabel}</span>
-                )}
-              </Anchor>
-            )}
-            {(wrap || activeIndex !== numChildren - 1) && (
-              <Anchor className={`${prefix}-control-next`} onClick={next}>
-                {nextIcon}
-                {nextLabel && (
-                  <span className="visually-hidden">{nextLabel}</span>
-                )}
-              </Anchor>
-            )}
-          </>
-        )}
-      </Component>
-    );
-  });
+
+          {controls && (
+            <>
+              {(wrap || activeIndex !== 0) && (
+                <Anchor className={`${prefix}-control-prev`} onClick={prev}>
+                  {prevIcon}
+                  {prevLabel && (
+                    <span className="visually-hidden">{prevLabel}</span>
+                  )}
+                </Anchor>
+              )}
+              {(wrap || activeIndex !== numChildren - 1) && (
+                <Anchor className={`${prefix}-control-next`} onClick={next}>
+                  {nextIcon}
+                  {nextLabel && (
+                    <span className="visually-hidden">{nextLabel}</span>
+                  )}
+                </Anchor>
+              )}
+            </>
+          )}
+        </Component>
+      );
+    },
+  );
 
 Carousel.displayName = 'Carousel';
 Carousel.propTypes = propTypes;
-Carousel.defaultProps = defaultProps;
 
 export default Object.assign(Carousel, {
   Caption: CarouselCaption,
diff --git a/src/CloseButton.tsx b/src/CloseButton.tsx
index 2014568689..c68265ed19 100644
--- a/src/CloseButton.tsx
+++ b/src/CloseButton.tsx
@@ -24,12 +24,11 @@ const propTypes = {
   variant: PropTypes.oneOf<CloseButtonVariant>(['white']),
 };
 
-const defaultProps = {
-  'aria-label': 'Close',
-};
-
 const CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(
-  ({ className, variant, ...props }, ref) => (
+  (
+    { className, variant, 'aria-label': ariaLabel = 'Close', ...props },
+    ref,
+  ) => (
     <button
       ref={ref}
       type="button"
@@ -38,6 +37,7 @@ const CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(
         variant && `btn-close-${variant}`,
         className,
       )}
+      aria-label={ariaLabel}
       {...props}
     />
   ),
@@ -45,6 +45,5 @@ const CloseButton = React.forwardRef<HTMLButtonElement, CloseButtonProps>(
 
 CloseButton.displayName = 'CloseButton';
 CloseButton.propTypes = propTypes;
-CloseButton.defaultProps = defaultProps;
 
 export default CloseButton;
diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index f522693b65..eb2ff01aa6 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -145,15 +145,6 @@ const propTypes = {
   children: PropTypes.element.isRequired,
 };
 
-const defaultProps = {
-  in: false,
-  timeout: 300,
-  mountOnEnter: false,
-  unmountOnExit: false,
-  appear: false,
-  getDimensionValue: getDefaultDimensionValue,
-};
-
 const Collapse = React.forwardRef<Transition<any>, CollapseProps>(
   (
     {
@@ -165,6 +156,11 @@ const Collapse = React.forwardRef<Transition<any>, CollapseProps>(
       className,
       children,
       dimension = 'height',
+      in: inProp = false,
+      timeout = 300,
+      mountOnEnter = false,
+      unmountOnExit = false,
+      appear = false,
       getDimensionValue = getDefaultDimensionValue,
       ...props
     },
@@ -227,13 +223,18 @@ const Collapse = React.forwardRef<Transition<any>, CollapseProps>(
         ref={ref}
         addEndListener={transitionEndListener}
         {...props}
-        aria-expanded={props.role ? props.in : null}
+        aria-expanded={props.role ? inProp : null}
         onEnter={handleEnter}
         onEntering={handleEntering}
         onEntered={handleEntered}
         onExit={handleExit}
         onExiting={handleExiting}
         childRef={(children as any).ref}
+        in={inProp}
+        timeout={timeout}
+        mountOnEnter={mountOnEnter}
+        unmountOnExit={unmountOnExit}
+        appear={appear}
       >
         {(state: TransitionStatus, innerProps: Record<string, unknown>) =>
           React.cloneElement(children, {
@@ -253,7 +254,5 @@ const Collapse = React.forwardRef<Transition<any>, CollapseProps>(
 
 // @ts-ignore
 Collapse.propTypes = propTypes;
-// @ts-ignore
-Collapse.defaultProps = defaultProps;
 
 export default Collapse;
diff --git a/src/Container.tsx b/src/Container.tsx
index 13e6482a5e..1bf57efef5 100644
--- a/src/Container.tsx
+++ b/src/Container.tsx
@@ -28,16 +28,12 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  fluid: false,
-};
-
 const Container: BsPrefixRefForwardingComponent<'div', ContainerProps> =
   React.forwardRef<HTMLElement, ContainerProps>(
     (
       {
         bsPrefix,
-        fluid,
+        fluid = false,
         // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
         as: Component = 'div',
         className,
@@ -62,6 +58,5 @@ const Container: BsPrefixRefForwardingComponent<'div', ContainerProps> =
 
 Container.displayName = 'Container';
 Container.propTypes = propTypes;
-Container.defaultProps = defaultProps;
 
 export default Container;
diff --git a/src/Dropdown.tsx b/src/Dropdown.tsx
index a3a5aa641b..32fbad9033 100644
--- a/src/Dropdown.tsx
+++ b/src/Dropdown.tsx
@@ -119,28 +119,21 @@ const propTypes = {
   autoClose: PropTypes.oneOf([true, 'outside', 'inside', false]),
 };
 
-const defaultProps: Partial<DropdownProps> = {
-  navbar: false,
-  align: 'start',
-  autoClose: true,
-  drop: 'down',
-};
-
 const Dropdown: BsPrefixRefForwardingComponent<'div', DropdownProps> =
   React.forwardRef<HTMLElement, DropdownProps>((pProps, ref) => {
     const {
       bsPrefix,
-      drop,
+      drop = 'down',
       show,
       className,
-      align,
+      align = 'start',
       onSelect,
       onToggle,
       focusFirstItemOnShow,
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
       as: Component = 'div',
       navbar: _4,
-      autoClose,
+      autoClose = true,
       ...props
     } = useUncontrolled(pProps, { show: 'onToggle' });
 
@@ -225,7 +218,6 @@ const Dropdown: BsPrefixRefForwardingComponent<'div', DropdownProps> =
 
 Dropdown.displayName = 'Dropdown';
 Dropdown.propTypes = propTypes;
-Dropdown.defaultProps = defaultProps;
 
 export default Object.assign(Dropdown, {
   Toggle: DropdownToggle,
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
index 36dda9718e..1f25433337 100644
--- a/src/DropdownMenu.tsx
+++ b/src/DropdownMenu.tsx
@@ -88,10 +88,6 @@ const propTypes = {
   variant: PropTypes.string,
 };
 
-const defaultProps: Partial<DropdownMenuProps> = {
-  flip: true,
-};
-
 export function getDropdownMenuPlacement(
   alignEnd: boolean,
   dropDirection?: DropDirection,
@@ -125,7 +121,7 @@ const DropdownMenu: BsPrefixRefForwardingComponent<'div', DropdownMenuProps> =
         className,
         align,
         rootCloseEvent,
-        flip,
+        flip = true,
         show: showProps,
         renderOnMount,
         // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
@@ -231,6 +227,5 @@ const DropdownMenu: BsPrefixRefForwardingComponent<'div', DropdownMenuProps> =
 
 DropdownMenu.displayName = 'DropdownMenu';
 DropdownMenu.propTypes = propTypes;
-DropdownMenu.defaultProps = defaultProps;
 
 export default DropdownMenu;
diff --git a/src/Fade.tsx b/src/Fade.tsx
index daec2852ea..c5d5a79714 100644
--- a/src/Fade.tsx
+++ b/src/Fade.tsx
@@ -89,27 +89,28 @@ const propTypes = {
   transitionClasses: PropTypes.object,
 };
 
-const defaultProps = {
-  in: false,
-  timeout: 300,
-  mountOnEnter: false,
-  unmountOnExit: false,
-  appear: false,
-};
-
 const fadeStyles = {
   [ENTERING]: 'show',
   [ENTERED]: 'show',
 };
 
 const Fade = React.forwardRef<Transition<any>, FadeProps>(
-  ({ className, children, transitionClasses = {}, ...props }, ref) => {
+  ({ className, children, transitionClasses = {}, onEnter, ...rest }, ref) => {
+    const props = {
+      in: false,
+      timeout: 300,
+      mountOnEnter: false,
+      unmountOnExit: false,
+      appear: false,
+      ...rest,
+    };
+
     const handleEnter = useCallback(
       (node, isAppearing) => {
         triggerBrowserReflow(node);
-        props.onEnter?.(node, isAppearing);
+        onEnter?.(node, isAppearing);
       },
-      [props],
+      [onEnter],
     );
 
     return (
@@ -138,7 +139,6 @@ const Fade = React.forwardRef<Transition<any>, FadeProps>(
 );
 
 Fade.propTypes = propTypes as any;
-Fade.defaultProps = defaultProps;
 Fade.displayName = 'Fade';
 
 export default Fade;
diff --git a/src/FigureImage.tsx b/src/FigureImage.tsx
index b4c8320171..2995e1aa7b 100644
--- a/src/FigureImage.tsx
+++ b/src/FigureImage.tsx
@@ -3,13 +3,12 @@ import * as React from 'react';
 
 import Image, { ImageProps, propTypes as imagePropTypes } from './Image';
 
-const defaultProps = { fluid: true };
-
 const FigureImage = React.forwardRef<HTMLImageElement, ImageProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, fluid = true, ...props }, ref) => (
     <Image
       ref={ref}
       {...props}
+      fluid={fluid}
       className={classNames(className, 'figure-img')}
     />
   ),
@@ -17,6 +16,5 @@ const FigureImage = React.forwardRef<HTMLImageElement, ImageProps>(
 
 FigureImage.displayName = 'FigureImage';
 FigureImage.propTypes = imagePropTypes;
-FigureImage.defaultProps = defaultProps;
 
 export default FigureImage;
diff --git a/src/FormLabel.tsx b/src/FormLabel.tsx
index e043b177e0..128e92f2ed 100644
--- a/src/FormLabel.tsx
+++ b/src/FormLabel.tsx
@@ -63,11 +63,6 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  column: false,
-  visuallyHidden: false,
-};
-
 const FormLabel: BsPrefixRefForwardingComponent<'label', FormLabelProps> =
   React.forwardRef<HTMLElement, FormLabelProps>(
     (
@@ -75,8 +70,8 @@ const FormLabel: BsPrefixRefForwardingComponent<'label', FormLabelProps> =
         // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
         as: Component = 'label',
         bsPrefix,
-        column,
-        visuallyHidden,
+        column = false,
+        visuallyHidden = false,
         className,
         htmlFor,
         ...props
@@ -124,6 +119,5 @@ const FormLabel: BsPrefixRefForwardingComponent<'label', FormLabelProps> =
 
 FormLabel.displayName = 'FormLabel';
 FormLabel.propTypes = propTypes;
-FormLabel.defaultProps = defaultProps;
 
 export default FormLabel;
diff --git a/src/Image.tsx b/src/Image.tsx
index 451dc79eb9..c0f0162c34 100644
--- a/src/Image.tsx
+++ b/src/Image.tsx
@@ -40,16 +40,17 @@ export const propTypes = {
   thumbnail: PropTypes.bool,
 };
 
-const defaultProps = {
-  fluid: false,
-  rounded: false,
-  roundedCircle: false,
-  thumbnail: false,
-};
-
 const Image = React.forwardRef<HTMLImageElement, ImageProps>(
   (
-    { bsPrefix, className, fluid, rounded, roundedCircle, thumbnail, ...props },
+    {
+      bsPrefix,
+      className,
+      fluid = false,
+      rounded = false,
+      roundedCircle = false,
+      thumbnail = false,
+      ...props
+    },
     ref,
   ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'img');
@@ -71,6 +72,5 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
 
 Image.displayName = 'Image';
 Image.propTypes = propTypes;
-Image.defaultProps = defaultProps;
 
 export default Image;
diff --git a/src/Modal.tsx b/src/Modal.tsx
index 678c630486..a309855852 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -222,17 +222,6 @@ const propTypes = {
   'aria-label': PropTypes.string,
 };
 
-const defaultProps = {
-  show: false,
-  backdrop: true,
-  keyboard: true,
-  autoFocus: true,
-  enforceFocus: true,
-  restoreFocus: true,
-  animation: true,
-  dialogAs: ModalDialog,
-};
-
 /* eslint-disable no-use-before-define, react/no-multi-comp */
 function DialogTransition(props) {
   return <Fade {...props} timeout={null} />;
@@ -253,24 +242,24 @@ const Modal: BsPrefixRefForwardingComponent<'div', ModalProps> =
         dialogClassName,
         contentClassName,
         children,
-        dialogAs: Dialog,
+        dialogAs: Dialog = ModalDialog,
         'aria-labelledby': ariaLabelledby,
         'aria-describedby': ariaDescribedby,
         'aria-label': ariaLabel,
 
         /* BaseModal props */
 
-        show,
-        animation,
-        backdrop,
-        keyboard,
+        show = false,
+        animation = true,
+        backdrop = true,
+        keyboard = true,
         onEscapeKeyDown,
         onShow,
         onHide,
         container,
-        autoFocus,
-        enforceFocus,
-        restoreFocus,
+        autoFocus = true,
+        enforceFocus = true,
+        restoreFocus = true,
         restoreFocusOptions,
         onEntered,
         onExit,
@@ -516,7 +505,6 @@ const Modal: BsPrefixRefForwardingComponent<'div', ModalProps> =
 
 Modal.displayName = 'Modal';
 Modal.propTypes = propTypes;
-Modal.defaultProps = defaultProps;
 
 export default Object.assign(Modal, {
   Body: ModalBody,
diff --git a/src/ModalHeader.tsx b/src/ModalHeader.tsx
index 7df600ba0f..d19f567b27 100644
--- a/src/ModalHeader.tsx
+++ b/src/ModalHeader.tsx
@@ -43,19 +43,25 @@ const propTypes = {
   onHide: PropTypes.func,
 };
 
-const defaultProps = {
-  closeLabel: 'Close',
-  closeButton: false,
-};
-
 const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(
-  ({ bsPrefix, className, ...props }, ref) => {
+  (
+    {
+      bsPrefix,
+      className,
+      closeLabel = 'Close',
+      closeButton = false,
+      ...props
+    },
+    ref,
+  ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'modal-header');
     return (
       <AbstractModalHeader
         ref={ref}
         {...props}
         className={classNames(className, bsPrefix)}
+        closeLabel={closeLabel}
+        closeButton={closeButton}
       />
     );
   },
@@ -63,6 +69,5 @@ const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(
 
 ModalHeader.displayName = 'ModalHeader';
 ModalHeader.propTypes = propTypes;
-ModalHeader.defaultProps = defaultProps;
 
 export default ModalHeader;
diff --git a/src/Nav.tsx b/src/Nav.tsx
index 9a6f0ea249..4bca852aaa 100644
--- a/src/Nav.tsx
+++ b/src/Nav.tsx
@@ -106,11 +106,6 @@ const propTypes = {
   onKeyDown: PropTypes.func,
 };
 
-const defaultProps = {
-  justify: false,
-  fill: false,
-};
-
 const Nav: BsPrefixRefForwardingComponent<'div', NavProps> = React.forwardRef<
   HTMLElement,
   NavProps
@@ -119,8 +114,8 @@ const Nav: BsPrefixRefForwardingComponent<'div', NavProps> = React.forwardRef<
     as = 'div',
     bsPrefix: initialBsPrefix,
     variant,
-    fill,
-    justify,
+    fill = false,
+    justify = false,
     navbar,
     navbarScroll,
     className,
@@ -165,7 +160,6 @@ const Nav: BsPrefixRefForwardingComponent<'div', NavProps> = React.forwardRef<
 
 Nav.displayName = 'Nav';
 Nav.propTypes = propTypes;
-Nav.defaultProps = defaultProps;
 
 export default Object.assign(Nav, {
   Item: NavItem,
diff --git a/src/NavLink.tsx b/src/NavLink.tsx
index 7590fcc5af..8e70ac08eb 100644
--- a/src/NavLink.tsx
+++ b/src/NavLink.tsx
@@ -50,10 +50,6 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  disabled: false,
-};
-
 const NavLink: BsPrefixRefForwardingComponent<'a', NavLinkProps> =
   React.forwardRef<HTMLElement, NavLinkProps>(
     (
@@ -63,6 +59,7 @@ const NavLink: BsPrefixRefForwardingComponent<'a', NavLinkProps> =
         as: Component = Anchor,
         active,
         eventKey,
+        disabled = false,
         ...props
       },
       ref,
@@ -71,6 +68,7 @@ const NavLink: BsPrefixRefForwardingComponent<'a', NavLinkProps> =
       const [navItemProps, meta] = useNavItem({
         key: makeEventKey(eventKey, props.href),
         active,
+        disabled,
         ...props,
       });
 
@@ -79,10 +77,11 @@ const NavLink: BsPrefixRefForwardingComponent<'a', NavLinkProps> =
           {...props}
           {...navItemProps}
           ref={ref}
+          disabled={disabled}
           className={classNames(
             className,
             bsPrefix,
-            props.disabled && 'disabled',
+            disabled && 'disabled',
             meta.isActive && 'active',
           )}
         />
@@ -92,6 +91,5 @@ const NavLink: BsPrefixRefForwardingComponent<'a', NavLinkProps> =
 
 NavLink.displayName = 'NavLink';
 NavLink.propTypes = propTypes;
-NavLink.defaultProps = defaultProps;
 
 export default NavLink;
diff --git a/src/Navbar.tsx b/src/Navbar.tsx
index 07dc722f44..e41c274011 100644
--- a/src/Navbar.tsx
+++ b/src/Navbar.tsx
@@ -50,7 +50,7 @@ const propTypes = {
    * The breakpoint, below which, the Navbar will collapse.
    * When `true` the Navbar will always be expanded regardless of screen size.
    */
-  expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired,
+  expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
   /**
    * A convenience prop for adding `bg-*` utility classes since they are so commonly used here.
@@ -137,18 +137,12 @@ const propTypes = {
   role: PropTypes.string,
 };
 
-const defaultProps = {
-  expand: true,
-  variant: 'light' as const,
-  collapseOnSelect: false,
-};
-
 const Navbar: BsPrefixRefForwardingComponent<'nav', NavbarProps> =
   React.forwardRef<HTMLElement, NavbarProps>((props, ref) => {
     const {
       bsPrefix: initialBsPrefix,
-      expand,
-      variant,
+      expand = true,
+      variant = 'light',
       bg,
       fixed,
       sticky,
@@ -158,7 +152,7 @@ const Navbar: BsPrefixRefForwardingComponent<'nav', NavbarProps> =
       expanded,
       onToggle,
       onSelect,
-      collapseOnSelect,
+      collapseOnSelect = false,
       ...controlledProps
     } = useUncontrolled(props, {
       expanded: 'onToggle',
@@ -217,7 +211,6 @@ const Navbar: BsPrefixRefForwardingComponent<'nav', NavbarProps> =
   });
 
 Navbar.propTypes = propTypes;
-Navbar.defaultProps = defaultProps;
 Navbar.displayName = 'Navbar';
 
 export default Object.assign(Navbar, {
diff --git a/src/NavbarToggle.tsx b/src/NavbarToggle.tsx
index 276a8ab40e..4dd3d209e4 100644
--- a/src/NavbarToggle.tsx
+++ b/src/NavbarToggle.tsx
@@ -32,10 +32,6 @@ const propTypes = {
   as: PropTypes.elementType,
 };
 
-const defaultProps = {
-  label: 'Toggle navigation',
-};
-
 const NavbarToggle: BsPrefixRefForwardingComponent<
   'button',
   NavbarToggleProps
@@ -45,7 +41,7 @@ const NavbarToggle: BsPrefixRefForwardingComponent<
       bsPrefix,
       className,
       children,
-      label,
+      label = 'Toggle navigation',
       // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
       as: Component = 'button',
       onClick,
@@ -82,6 +78,5 @@ const NavbarToggle: BsPrefixRefForwardingComponent<
 
 NavbarToggle.displayName = 'NavbarToggle';
 NavbarToggle.propTypes = propTypes;
-NavbarToggle.defaultProps = defaultProps;
 
 export default NavbarToggle;
diff --git a/src/Offcanvas.tsx b/src/Offcanvas.tsx
index 2eae124c6d..b4cdfc030f 100644
--- a/src/Offcanvas.tsx
+++ b/src/Offcanvas.tsx
@@ -187,18 +187,6 @@ const propTypes = {
   'aria-labelledby': PropTypes.string,
 };
 
-const defaultProps: Partial<OffcanvasProps> = {
-  show: false,
-  backdrop: true,
-  keyboard: true,
-  scroll: false,
-  autoFocus: true,
-  enforceFocus: true,
-  restoreFocus: true,
-  placement: 'start',
-  renderStaticNode: false,
-};
-
 function DialogTransition(props) {
   return <OffcanvasToggling {...props} />;
 }
@@ -215,22 +203,22 @@ const Offcanvas: BsPrefixRefForwardingComponent<'div', OffcanvasProps> =
         className,
         children,
         'aria-labelledby': ariaLabelledby,
-        placement,
+        placement = 'start',
         responsive,
 
         /* BaseModal props */
 
-        show,
-        backdrop,
-        keyboard,
-        scroll,
+        show = false,
+        backdrop = true,
+        keyboard = true,
+        scroll = false,
         onEscapeKeyDown,
         onShow,
         onHide,
         container,
-        autoFocus,
-        enforceFocus,
-        restoreFocus,
+        autoFocus = true,
+        enforceFocus = true,
+        restoreFocus = true,
         restoreFocusOptions,
         onEntered,
         onExit,
@@ -240,7 +228,7 @@ const Offcanvas: BsPrefixRefForwardingComponent<'div', OffcanvasProps> =
         onExited,
         backdropClassName,
         manager: propsManager,
-        renderStaticNode,
+        renderStaticNode = false,
         ...props
       },
       ref,
@@ -370,7 +358,6 @@ const Offcanvas: BsPrefixRefForwardingComponent<'div', OffcanvasProps> =
 
 Offcanvas.displayName = 'Offcanvas';
 Offcanvas.propTypes = propTypes;
-Offcanvas.defaultProps = defaultProps;
 
 export default Object.assign(Offcanvas, {
   Body: OffcanvasBody,
diff --git a/src/OffcanvasHeader.tsx b/src/OffcanvasHeader.tsx
index ebb3df07f6..615279314c 100644
--- a/src/OffcanvasHeader.tsx
+++ b/src/OffcanvasHeader.tsx
@@ -43,19 +43,25 @@ const propTypes = {
   onHide: PropTypes.func,
 };
 
-const defaultProps = {
-  closeLabel: 'Close',
-  closeButton: false,
-};
-
 const OffcanvasHeader = React.forwardRef<HTMLDivElement, OffcanvasHeaderProps>(
-  ({ bsPrefix, className, ...props }, ref) => {
+  (
+    {
+      bsPrefix,
+      className,
+      closeLabel = 'Close',
+      closeButton = false,
+      ...props
+    },
+    ref,
+  ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas-header');
     return (
       <AbstractModalHeader
         ref={ref}
         {...props}
         className={classNames(className, bsPrefix)}
+        closeLabel={closeLabel}
+        closeButton={closeButton}
       />
     );
   },
@@ -63,6 +69,5 @@ const OffcanvasHeader = React.forwardRef<HTMLDivElement, OffcanvasHeaderProps>(
 
 OffcanvasHeader.displayName = 'OffcanvasHeader';
 OffcanvasHeader.propTypes = propTypes;
-OffcanvasHeader.defaultProps = defaultProps;
 
 export default OffcanvasHeader;
diff --git a/src/OffcanvasToggling.tsx b/src/OffcanvasToggling.tsx
index df662e7b9f..9e0b8ae1ee 100644
--- a/src/OffcanvasToggling.tsx
+++ b/src/OffcanvasToggling.tsx
@@ -80,13 +80,6 @@ const propTypes = {
   onExited: PropTypes.func,
 };
 
-const defaultProps = {
-  in: false,
-  mountOnEnter: false,
-  unmountOnExit: false,
-  appear: false,
-};
-
 const transitionStyles = {
   [ENTERING]: 'show',
   [ENTERED]: 'show',
@@ -95,34 +88,51 @@ const transitionStyles = {
 const OffcanvasToggling = React.forwardRef<
   Transition<any>,
   OffcanvasTogglingProps
->(({ bsPrefix, className, children, ...props }, ref) => {
-  bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas');
+>(
+  (
+    {
+      bsPrefix,
+      className,
+      children,
+      in: inProp = false,
+      mountOnEnter = false,
+      unmountOnExit = false,
+      appear = false,
+      ...props
+    },
+    ref,
+  ) => {
+    bsPrefix = useBootstrapPrefix(bsPrefix, 'offcanvas');
 
-  return (
-    <TransitionWrapper
-      ref={ref}
-      addEndListener={transitionEndListener}
-      {...props}
-      childRef={(children as any).ref}
-    >
-      {(status: TransitionStatus, innerProps: Record<string, unknown>) =>
-        React.cloneElement(children, {
-          ...innerProps,
-          className: classNames(
-            className,
-            children.props.className,
-            (status === ENTERING || status === EXITING) &&
-              `${bsPrefix}-toggling`,
-            transitionStyles[status],
-          ),
-        })
-      }
-    </TransitionWrapper>
-  );
-});
+    return (
+      <TransitionWrapper
+        ref={ref}
+        addEndListener={transitionEndListener}
+        in={inProp}
+        mountOnEnter={mountOnEnter}
+        unmountOnExit={unmountOnExit}
+        appear={appear}
+        {...props}
+        childRef={(children as any).ref}
+      >
+        {(status: TransitionStatus, innerProps: Record<string, unknown>) =>
+          React.cloneElement(children, {
+            ...innerProps,
+            className: classNames(
+              className,
+              children.props.className,
+              (status === ENTERING || status === EXITING) &&
+                `${bsPrefix}-toggling`,
+              transitionStyles[status],
+            ),
+          })
+        }
+      </TransitionWrapper>
+    );
+  },
+);
 
 OffcanvasToggling.propTypes = propTypes as any;
-OffcanvasToggling.defaultProps = defaultProps;
 OffcanvasToggling.displayName = 'OffcanvasToggling';
 
 export default OffcanvasToggling;
diff --git a/src/Overlay.tsx b/src/Overlay.tsx
index f5070a6487..aef5181201 100644
--- a/src/Overlay.tsx
+++ b/src/Overlay.tsx
@@ -141,13 +141,6 @@ const propTypes = {
   ]),
 };
 
-const defaultProps: Partial<OverlayProps> = {
-  transition: Fade,
-  rootClose: false,
-  show: false,
-  placement: 'top',
-};
-
 function wrapRefs(props, arrowProps) {
   const { ref } = props;
   const { ref: aRef } = arrowProps;
@@ -159,7 +152,15 @@ function wrapRefs(props, arrowProps) {
 
 const Overlay = React.forwardRef<HTMLElement, OverlayProps>(
   (
-    { children: overlay, transition, popperConfig = {}, ...outerProps },
+    {
+      children: overlay,
+      transition = Fade,
+      popperConfig = {},
+      rootClose = false,
+      placement = 'top',
+      show: outerShow = false,
+      ...outerProps
+    },
     outerRef,
   ) => {
     const popperRef = useRef<Partial<PopperRef>>({});
@@ -184,10 +185,10 @@ const Overlay = React.forwardRef<HTMLElement, OverlayProps>(
     }, [firstRenderedState]);
 
     useEffect(() => {
-      if (!outerProps.show) {
+      if (!outerShow) {
         setFirstRenderedState(null);
       }
-    }, [outerProps.show]);
+    }, [outerShow]);
 
     return (
       <BaseOverlay
@@ -199,6 +200,9 @@ const Overlay = React.forwardRef<HTMLElement, OverlayProps>(
           onFirstUpdate: handleFirstUpdate,
         }}
         transition={actualTransition}
+        rootClose={rootClose}
+        placement={placement}
+        show={outerShow}
       >
         {(overlayProps, { arrowProps, popper: popperObj, show }) => {
           wrapRefs(overlayProps, arrowProps);
@@ -249,6 +253,5 @@ const Overlay = React.forwardRef<HTMLElement, OverlayProps>(
 
 Overlay.displayName = 'Overlay';
 Overlay.propTypes = propTypes;
-Overlay.defaultProps = defaultProps;
 
 export default Overlay;
diff --git a/src/OverlayTrigger.tsx b/src/OverlayTrigger.tsx
index 3a07482d1b..ec93d352a4 100644
--- a/src/OverlayTrigger.tsx
+++ b/src/OverlayTrigger.tsx
@@ -164,13 +164,8 @@ const propTypes = {
   ]),
 };
 
-const defaultProps = {
-  defaultShow: false,
-  trigger: ['hover', 'focus'],
-};
-
 function OverlayTrigger({
-  trigger,
+  trigger = ['hover', 'focus'],
   overlay,
   children,
   popperConfig = {},
@@ -315,6 +310,5 @@ function OverlayTrigger({
 }
 
 OverlayTrigger.propTypes = propTypes;
-OverlayTrigger.defaultProps = defaultProps;
 
 export default OverlayTrigger;
diff --git a/src/PageItem.tsx b/src/PageItem.tsx
index c034bafb45..6a35b18360 100644
--- a/src/PageItem.tsx
+++ b/src/PageItem.tsx
@@ -32,21 +32,15 @@ const propTypes = {
   onClick: PropTypes.func,
 };
 
-const defaultProps = {
-  active: false,
-  disabled: false,
-  activeLabel: '(current)',
-};
-
 const PageItem: BsPrefixRefForwardingComponent<'li', PageItemProps> =
   React.forwardRef<HTMLLIElement, PageItemProps>(
     (
       {
-        active,
-        disabled,
+        active = false,
+        disabled = false,
         className,
         style,
-        activeLabel,
+        activeLabel = '(current)',
         children,
         ...props
       }: PageItemProps,
@@ -71,7 +65,6 @@ const PageItem: BsPrefixRefForwardingComponent<'li', PageItemProps> =
   );
 
 PageItem.propTypes = propTypes;
-PageItem.defaultProps = defaultProps;
 PageItem.displayName = 'PageItem';
 
 export default PageItem;
diff --git a/src/Popover.tsx b/src/Popover.tsx
index f8e5f4eac3..38b1e247dd 100644
--- a/src/Popover.tsx
+++ b/src/Popover.tsx
@@ -85,15 +85,11 @@ const propTypes = {
   show: PropTypes.bool,
 };
 
-const defaultProps: Partial<PopoverProps> = {
-  placement: 'right',
-};
-
 const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
   (
     {
       bsPrefix,
-      placement,
+      placement = 'right',
       className,
       style,
       children,
@@ -140,7 +136,6 @@ const Popover = React.forwardRef<HTMLDivElement, PopoverProps>(
 );
 
 Popover.propTypes = propTypes as any;
-Popover.defaultProps = defaultProps;
 
 export default Object.assign(Popover, {
   Header: PopoverHeader,
diff --git a/src/ProgressBar.tsx b/src/ProgressBar.tsx
index 216c45b473..3570cd181e 100644
--- a/src/ProgressBar.tsx
+++ b/src/ProgressBar.tsx
@@ -124,15 +124,6 @@ const propTypes = {
   isChild: PropTypes.bool,
 };
 
-const defaultProps = {
-  min: 0,
-  max: 100,
-  animated: false,
-  isChild: false,
-  visuallyHidden: false,
-  striped: false,
-};
-
 function getPercentage(now, min, max) {
   const percentage = ((now - min) / (max - min)) * 100;
   return Math.round(percentage * ROUND_PRECISION) / ROUND_PRECISION;
@@ -182,7 +173,16 @@ function renderProgressBar(
 renderProgressBar.propTypes = propTypes;
 
 const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
-  ({ isChild, ...props }: ProgressBarProps, ref) => {
+  ({ isChild = false, ...rest }: ProgressBarProps, ref) => {
+    const props = {
+      min: 0,
+      max: 100,
+      animated: false,
+      visuallyHidden: false,
+      striped: false,
+      ...rest,
+    };
+
     props.bsPrefix = useBootstrapPrefix(props.bsPrefix, 'progress');
 
     if (isChild) {
@@ -233,6 +233,5 @@ const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
 
 ProgressBar.displayName = 'ProgressBar';
 ProgressBar.propTypes = propTypes;
-ProgressBar.defaultProps = defaultProps;
 
 export default ProgressBar;
diff --git a/src/Ratio.tsx b/src/Ratio.tsx
index 7aad47dd53..0c71b05fdd 100644
--- a/src/Ratio.tsx
+++ b/src/Ratio.tsx
@@ -32,10 +32,6 @@ const propTypes = {
   aspectRatio: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
-const defaultProps = {
-  aspectRatio: '1x1' as const,
-};
-
 function toPercent(num: number): string {
   if (num <= 0) return '100%';
   if (num < 1) return `${num * 100}%`;
@@ -43,7 +39,10 @@ function toPercent(num: number): string {
 }
 
 const Ratio = React.forwardRef<HTMLDivElement, RatioProps>(
-  ({ bsPrefix, className, children, aspectRatio, style, ...props }, ref) => {
+  (
+    { bsPrefix, className, children, aspectRatio = '1x1', style, ...props },
+    ref,
+  ) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'ratio');
     const isCustomRatio = typeof aspectRatio === 'number';
 
@@ -70,6 +69,5 @@ const Ratio = React.forwardRef<HTMLDivElement, RatioProps>(
 );
 
 Ratio.propTypes = propTypes;
-Ratio.defaultProps = defaultProps;
 
 export default Ratio;
diff --git a/src/SplitButton.tsx b/src/SplitButton.tsx
index 72fa169fc3..95f9ade9b5 100644
--- a/src/SplitButton.tsx
+++ b/src/SplitButton.tsx
@@ -90,11 +90,6 @@ const propTypes = {
   size: PropTypes.string,
 };
 
-const defaultProps: Partial<SplitButtonProps> = {
-  toggleLabel: 'Toggle dropdown',
-  type: 'button',
-};
-
 /**
  * A convenience component for simple or general use split button dropdowns. Renders a
  * `ButtonGroup` containing a `Button` and a `Button` toggle for the `Dropdown`. All `children`
@@ -113,8 +108,8 @@ const SplitButton = React.forwardRef<HTMLElement, SplitButtonProps>(
       size,
       variant,
       title,
-      type,
-      toggleLabel,
+      type = 'button',
+      toggleLabel = 'Toggle dropdown',
       children,
       onClick,
       href,
@@ -164,7 +159,6 @@ const SplitButton = React.forwardRef<HTMLElement, SplitButtonProps>(
 );
 
 SplitButton.propTypes = propTypes as any;
-SplitButton.defaultProps = defaultProps;
 SplitButton.displayName = 'SplitButton';
 
 export default SplitButton;
diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index f9b58fc1c5..b44a629454 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -94,12 +94,6 @@ const propTypes = {
   justify: PropTypes.bool,
 };
 
-const defaultProps = {
-  variant: 'tabs',
-  mountOnEnter: false,
-  unmountOnExit: false,
-};
-
 function getDefaultActiveKey(children) {
   let defaultActiveKey;
   forEach(children, (child) => {
@@ -139,8 +133,9 @@ const Tabs = (props: TabsProps) => {
     id,
     onSelect,
     transition,
-    mountOnEnter,
-    unmountOnExit,
+    mountOnEnter = false,
+    unmountOnExit = false,
+    variant = 'tabs',
     children,
     activeKey = getDefaultActiveKey(children),
     ...controlledProps
@@ -157,7 +152,7 @@ const Tabs = (props: TabsProps) => {
       mountOnEnter={mountOnEnter}
       unmountOnExit={unmountOnExit}
     >
-      <Nav {...controlledProps} role="tablist" as="ul">
+      <Nav {...controlledProps} role="tablist" as="ul" variant={variant}>
         {map(children, renderTab)}
       </Nav>
 
@@ -178,7 +173,6 @@ const Tabs = (props: TabsProps) => {
 };
 
 Tabs.propTypes = propTypes;
-Tabs.defaultProps = defaultProps;
 Tabs.displayName = 'Tabs';
 
 export default Tabs;
diff --git a/src/ToastHeader.tsx b/src/ToastHeader.tsx
index 17ffe8976e..273b52147f 100644
--- a/src/ToastHeader.tsx
+++ b/src/ToastHeader.tsx
@@ -38,18 +38,13 @@ const propTypes = {
   closeButton: PropTypes.bool,
 };
 
-const defaultProps = {
-  closeLabel: 'Close',
-  closeButton: true,
-};
-
 const ToastHeader = React.forwardRef<HTMLDivElement, ToastHeaderProps>(
   (
     {
       bsPrefix,
-      closeLabel,
+      closeLabel = 'Close',
       closeVariant,
-      closeButton,
+      closeButton = true,
       className,
       children,
       ...props
@@ -83,6 +78,5 @@ const ToastHeader = React.forwardRef<HTMLDivElement, ToastHeaderProps>(
 
 ToastHeader.displayName = 'ToastHeader';
 ToastHeader.propTypes = propTypes;
-ToastHeader.defaultProps = defaultProps;
 
 export default ToastHeader;
diff --git a/src/ToggleButtonGroup.tsx b/src/ToggleButtonGroup.tsx
index b796c79a23..0740d63d8f 100644
--- a/src/ToggleButtonGroup.tsx
+++ b/src/ToggleButtonGroup.tsx
@@ -75,19 +75,21 @@ const propTypes = {
   vertical: PropTypes.bool,
 };
 
-const defaultProps = {
-  type: 'radio',
-  vertical: false,
-};
-
 const ToggleButtonGroup: BsPrefixRefForwardingComponent<
   'a',
   ToggleButtonGroupProps<any>
 > = React.forwardRef<HTMLElement, ToggleButtonGroupProps<any>>((props, ref) => {
-  const { children, type, name, value, onChange, ...controlledProps } =
-    useUncontrolled(props, {
-      value: 'onChange',
-    });
+  const {
+    children,
+    type = 'radio',
+    name,
+    value,
+    onChange,
+    vertical = false,
+    ...controlledProps
+  } = useUncontrolled(props, {
+    value: 'onChange',
+  });
 
   const getValues: () => any[] = () => (value == null ? [] : [].concat(value));
 
@@ -120,7 +122,7 @@ const ToggleButtonGroup: BsPrefixRefForwardingComponent<
   );
 
   return (
-    <ButtonGroup {...controlledProps} ref={ref as any}>
+    <ButtonGroup {...controlledProps} ref={ref as any} vertical={vertical}>
       {map(children, (child) => {
         const values = getValues();
         const { value: childVal, onChange: childOnChange } = child.props;
@@ -138,7 +140,6 @@ const ToggleButtonGroup: BsPrefixRefForwardingComponent<
 });
 
 ToggleButtonGroup.propTypes = propTypes;
-ToggleButtonGroup.defaultProps = defaultProps as any;
 
 export default Object.assign(ToggleButtonGroup, {
   Button: ToggleButton,
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index 86ac3fe098..16ece8277a 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -77,15 +77,11 @@ const propTypes = {
   show: PropTypes.any,
 };
 
-const defaultProps = {
-  placement: 'right',
-};
-
 const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   (
     {
       bsPrefix,
-      placement,
+      placement = 'right',
       className,
       style,
       children,
@@ -128,7 +124,6 @@ const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
 );
 
 Tooltip.propTypes = propTypes as any;
-Tooltip.defaultProps = defaultProps as any;
 Tooltip.displayName = 'Tooltip';
 
 export default Tooltip;
diff --git a/src/createWithBsPrefix.tsx b/src/createWithBsPrefix.tsx
index a8a1fcd81f..114e6d2cb6 100644
--- a/src/createWithBsPrefix.tsx
+++ b/src/createWithBsPrefix.tsx
@@ -28,17 +28,22 @@ export default function createWithBsPrefix<
       { className, bsPrefix, as: Tag = Component || 'div', ...props }: any,
       ref,
     ) => {
+      const componentProps = {
+        ...defaultProps,
+        ...props,
+      };
+
       const resolvedPrefix = useBootstrapPrefix(bsPrefix, prefix);
       return (
         <Tag
           ref={ref}
           className={classNames(className, resolvedPrefix)}
-          {...props}
+          {...componentProps}
         />
       );
     },
   );
-  BsComponent.defaultProps = defaultProps as any;
+
   BsComponent.displayName = displayName;
   return BsComponent as any;
 }