diff --git a/docs/src/components/CarbonAd/CarbonAd.js b/docs/src/components/CarbonAd/CarbonAd.js
index 67783fce68..94c78c9254 100644
--- a/docs/src/components/CarbonAd/CarbonAd.js
+++ b/docs/src/components/CarbonAd/CarbonAd.js
@@ -53,7 +53,7 @@ class CarbonAd extends Component {
       // https://github.com/Semantic-Org/Semantic-UI-React/pull/3215
       if (!isLoading) {
         isLoading = true
-        _.invoke(window._carbonads, 'refresh')
+        window._carbonads.refresh?.()
         waitForLoad()
       }
     })
diff --git a/docs/src/components/CodeEditor/CodeEditor.js b/docs/src/components/CodeEditor/CodeEditor.js
index e0188ce109..cfd1963106 100644
--- a/docs/src/components/CodeEditor/CodeEditor.js
+++ b/docs/src/components/CodeEditor/CodeEditor.js
@@ -113,7 +113,7 @@ class CodeEditor extends React.Component {
   }
 
   handleChange = _.debounce((value, e) => {
-    _.invoke(this.props, 'onChange', value, e)
+    this.props.onChange?.(value, e)
   }, 300)
 
   setCursorVisibility = (visible) => {
diff --git a/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js b/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js
index 6a9a70bab4..6d7a76d03a 100644
--- a/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js
+++ b/docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js
@@ -20,7 +20,7 @@ export default class ComponentSidebarSection extends PureComponent {
   }
 
   handleItemClick = (examplePath) => (e) => {
-    _.invoke(this.props, 'onItemClick', e, { examplePath })
+    this.props.onItemClick?.(e, { examplePath })
   }
 
   handleTitleClick = () => {
diff --git a/src/addons/Confirm/Confirm.js b/src/addons/Confirm/Confirm.js
index 2b3e7c004e..fdf40862f4 100644
--- a/src/addons/Confirm/Confirm.js
+++ b/src/addons/Confirm/Confirm.js
@@ -15,20 +15,20 @@ const Confirm = React.forwardRef(function (props, ref) {
   const rest = getUnhandledProps(Confirm, props)
 
   const handleCancel = (e) => {
-    _.invoke(props, 'onCancel', e, props)
+    props.onCancel?.(e, props)
   }
 
   const handleCancelOverrides = (predefinedProps) => ({
     onClick: (e, buttonProps) => {
-      _.invoke(predefinedProps, 'onClick', e, buttonProps)
+      predefinedProps.onClick?.(e, buttonProps)
       handleCancel(e)
     },
   })
 
   const handleConfirmOverrides = (predefinedProps) => ({
     onClick: (e, buttonProps) => {
-      _.invoke(predefinedProps, 'onClick', e, buttonProps)
-      _.invoke(props, 'onConfirm', e, props)
+      predefinedProps.onClick?.(e, buttonProps)
+      props.onConfirm?.(e, props)
     },
   })
 
diff --git a/src/addons/Pagination/Pagination.js b/src/addons/Pagination/Pagination.js
index 078389ab26..d55538f90d 100644
--- a/src/addons/Pagination/Pagination.js
+++ b/src/addons/Pagination/Pagination.js
@@ -38,7 +38,7 @@ const Pagination = React.forwardRef(function (props, ref) {
     }
 
     setActivePage(nextActivePage)
-    _.invoke(props, 'onPageChange', e, { ...props, activePage: nextActivePage })
+    props.onPageChange?.(e, { ...props, activePage: nextActivePage })
   }
 
   const handleItemOverrides = (active, type, value) => (predefinedProps) => ({
@@ -46,7 +46,7 @@ const Pagination = React.forwardRef(function (props, ref) {
     type,
     key: `${type}-${value}`,
     onClick: (e, itemProps) => {
-      _.invoke(predefinedProps, 'onClick', e, itemProps)
+      predefinedProps.onClick?.(e, itemProps)
 
       if (itemProps.type !== 'ellipsisItem') {
         handleItemClick(e, itemProps)
diff --git a/src/addons/Pagination/PaginationItem.js b/src/addons/Pagination/PaginationItem.js
index 6cb9af2b91..74369da921 100644
--- a/src/addons/Pagination/PaginationItem.js
+++ b/src/addons/Pagination/PaginationItem.js
@@ -14,14 +14,14 @@ const PaginationItem = React.forwardRef(function (props, ref) {
   const disabled = props.disabled || type === 'ellipsisItem'
 
   const handleClick = (e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   }
 
   const handleKeyDown = (e) => {
-    _.invoke(props, 'onKeyDown', e, props)
+    props.onKeyDown?.(e, props)
 
     if (keyboardKey.getCode(e) === keyboardKey.Enter) {
-      _.invoke(props, 'onClick', e, props)
+      props.onClick?.(e, props)
     }
   }
 
diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js
index 4f49874189..f86dcb099e 100644
--- a/src/addons/Portal/Portal.js
+++ b/src/addons/Portal/Portal.js
@@ -61,7 +61,7 @@ function Portal(props) {
     debug('open()')
 
     setOpen(true)
-    _.invoke(props, 'onOpen', e, { ...props, open: true })
+    props.onOpen?.(e, { ...props, open: true })
   }
 
   const openPortalWithTimeout = (e, delay) => {
@@ -77,7 +77,7 @@ function Portal(props) {
     debug('close()')
 
     setOpen(false)
-    _.invoke(props, 'onClose', e, { ...props, open: false })
+    props.onClose?.(e, { ...props, open: false })
   }
 
   const closePortalWithTimeout = (e, delay) => {
@@ -173,12 +173,12 @@ function Portal(props) {
 
   const handleTriggerBlur = (e, ...rest) => {
     // Call original event handler
-    _.invoke(trigger, 'props.onBlur', e, ...rest)
+    trigger.props.onBlur?.(e, ...rest)
 
     // IE 11 doesn't work with relatedTarget in blur events
     const target = e.relatedTarget || document.activeElement
     // do not close if focus is given to the portal
-    const didFocusPortal = _.invoke(contentRef.current, 'contains', target)
+    const didFocusPortal = contentRef.current.contains?.(target)
 
     if (!closeOnTriggerBlur || didFocusPortal) {
       return
@@ -190,7 +190,7 @@ function Portal(props) {
 
   const handleTriggerClick = (e, ...rest) => {
     // Call original event handler
-    _.invoke(trigger, 'props.onClick', e, ...rest)
+    trigger.props.onClick?.(e, ...rest)
 
     if (open && closeOnTriggerClick) {
       debug('handleTriggerClick() - close')
@@ -204,7 +204,7 @@ function Portal(props) {
 
   const handleTriggerFocus = (e, ...rest) => {
     // Call original event handler
-    _.invoke(trigger, 'props.onFocus', e, ...rest)
+    trigger.props.onFocus?.(e, ...rest)
 
     if (!openOnTriggerFocus) {
       return
@@ -218,7 +218,7 @@ function Portal(props) {
     clearTimeout(mouseEnterTimer)
 
     // Call original event handler
-    _.invoke(trigger, 'props.onMouseLeave', e, ...rest)
+    trigger.props.onMouseLeave?.(e, ...rest)
 
     if (!closeOnTriggerMouseLeave) {
       return
@@ -232,7 +232,7 @@ function Portal(props) {
     clearTimeout(mouseLeaveTimer)
 
     // Call original event handler
-    _.invoke(trigger, 'props.onMouseEnter', e, ...rest)
+    trigger.props.onMouseEnter?.(e, ...rest)
 
     if (!openOnTriggerMouseEnter) {
       return
@@ -248,8 +248,8 @@ function Portal(props) {
         <>
           <PortalInner
             mountNode={mountNode}
-            onMount={() => _.invoke(props, 'onMount', null, props)}
-            onUnmount={() => _.invoke(props, 'onUnmount', null, props)}
+            onMount={() => props.onMount?.(null, props)}
+            onUnmount={() => props.onUnmount?.(null, props)}
             ref={contentRef}
           >
             {children}
diff --git a/src/addons/Portal/PortalInner.js b/src/addons/Portal/PortalInner.js
index 2c8c5bb929..6ed01ce4b8 100644
--- a/src/addons/Portal/PortalInner.js
+++ b/src/addons/Portal/PortalInner.js
@@ -12,8 +12,8 @@ const debug = makeDebugger('PortalInner')
  * An inner component that allows you to render children outside their parent.
  */
 const PortalInner = React.forwardRef(function (props, ref) {
-  const handleMount = useEventCallback(() => _.invoke(props, 'onMount', null, props))
-  const handleUnmount = useEventCallback(() => _.invoke(props, 'onUnmount', null, props))
+  const handleMount = useEventCallback(() => props.onMount?.(null, props))
+  const handleUnmount = useEventCallback(() => props.onUnmount?.(null, props))
 
   const element = usePortalElement(props.children, ref)
 
diff --git a/src/addons/TextArea/TextArea.js b/src/addons/TextArea/TextArea.js
index d6b0537f02..f0269f544d 100644
--- a/src/addons/TextArea/TextArea.js
+++ b/src/addons/TextArea/TextArea.js
@@ -15,13 +15,13 @@ const TextArea = React.forwardRef(function (props, ref) {
   const handleChange = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onChange', e, { ...props, value: newValue })
+    props.onChange?.(e, { ...props, value: newValue })
   }
 
   const handleInput = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onInput', e, { ...props, value: newValue })
+    props.onInput?.(e, { ...props, value: newValue })
   }
 
   const rest = getUnhandledProps(TextArea, props)
diff --git a/src/addons/TransitionablePortal/TransitionablePortal.js b/src/addons/TransitionablePortal/TransitionablePortal.js
index 37bce0ee52..eadbd4a22c 100644
--- a/src/addons/TransitionablePortal/TransitionablePortal.js
+++ b/src/addons/TransitionablePortal/TransitionablePortal.js
@@ -72,8 +72,8 @@ function TransitionablePortal(props) {
     debug('handleTransitionHide()')
 
     setTransitionVisible(false)
-    _.invoke(props, 'onClose', null, { ...data, portalOpen: false, transitionVisible: false })
-    _.invoke(props, 'onHide', null, { ...data, portalOpen, transitionVisible: false })
+    props.onClose?.(null, { ...data, portalOpen: false, transitionVisible: false })
+    props.onHide?.(null, { ...data, portalOpen, transitionVisible: false })
   }
 
   const handleTransitionStart = (nothing, data) => {
@@ -81,7 +81,7 @@ function TransitionablePortal(props) {
     const { status } = data
     const nextTransitionVisible = status === TRANSITION_STATUS_ENTERING
 
-    _.invoke(props, 'onStart', null, {
+    props.onStart?.(null, {
       ...data,
       portalOpen,
       transitionVisible: nextTransitionVisible,
@@ -93,7 +93,7 @@ function TransitionablePortal(props) {
     }
 
     setTransitionVisible(nextTransitionVisible)
-    _.invoke(props, 'onOpen', null, {
+    props.onOpen?.(null, {
       ...data,
       transitionVisible: nextTransitionVisible,
       portalOpen: true,
diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js
index d8349a2ac8..c421d2042e 100644
--- a/src/collections/Breadcrumb/BreadcrumbSection.js
+++ b/src/collections/Breadcrumb/BreadcrumbSection.js
@@ -25,7 +25,7 @@ const BreadcrumbSection = React.forwardRef(function (props, ref) {
     if (link || onClick) return 'a'
   })
 
-  const handleClick = useEventCallback((e) => _.invoke(props, 'onClick', e, props))
+  const handleClick = useEventCallback((e) => props.onClick?.(e, props))
 
   return (
     <ElementType {...rest} className={classes} href={href} onClick={handleClick} ref={ref}>
diff --git a/src/collections/Form/Form.js b/src/collections/Form/Form.js
index 6c1facc274..f64f942e9f 100644
--- a/src/collections/Form/Form.js
+++ b/src/collections/Form/Form.js
@@ -43,8 +43,8 @@ const Form = React.forwardRef(function (props, ref) {
   const handleSubmit = (e, ...args) => {
     // Heads up! Third party libs can pass own data as first argument, we need to check that it has preventDefault()
     // method.
-    if (typeof action !== 'string') _.invoke(e, 'preventDefault')
-    _.invoke(props, 'onSubmit', e, props, ...args)
+    if (typeof action !== 'string') e.preventDefault?.()
+    props.onSubmit?.(e, props, ...args)
   }
 
   const classes = cx(
diff --git a/src/collections/Menu/Menu.js b/src/collections/Menu/Menu.js
index 5e2db94868..776232c5bd 100644
--- a/src/collections/Menu/Menu.js
+++ b/src/collections/Menu/Menu.js
@@ -102,8 +102,8 @@ const Menu = React.forwardRef(function (props, ref) {
 
               setActiveIndex(itemIndex)
 
-              _.invoke(predefinedProps, 'onClick', e, itemProps)
-              _.invoke(props, 'onItemClick', e, itemProps)
+              predefinedProps.onClick?.(e, itemProps)
+              props.onItemClick?.(e, itemProps)
             },
           }),
         }),
diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index 728a8ec13f..7830f595e0 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -55,7 +55,7 @@ const MenuItem = React.forwardRef(function (props, ref) {
 
   const handleClick = useEventCallback((e) => {
     if (!disabled) {
-      _.invoke(props, 'onClick', e, props)
+      props.onClick?.(e, props)
     }
   })
 
diff --git a/src/collections/Message/Message.js b/src/collections/Message/Message.js
index 68cfe3e3aa..0d0ad6e764 100644
--- a/src/collections/Message/Message.js
+++ b/src/collections/Message/Message.js
@@ -71,7 +71,7 @@ const Message = React.forwardRef(function (props, ref) {
   const ElementType = getElementType(Message, props)
 
   const handleDismiss = useEventCallback((e) => {
-    _.invoke(props, 'onDismiss', e, props)
+    props.onDismiss?.(e, props)
   })
   const dismissIcon = onDismiss && <Icon name='close' onClick={handleDismiss} />
 
diff --git a/src/elements/Button/Button.js b/src/elements/Button/Button.js
index f2fd188de6..effd8cfe8c 100644
--- a/src/elements/Button/Button.js
+++ b/src/elements/Button/Button.js
@@ -136,7 +136,7 @@ const Button = React.forwardRef(function (props, ref) {
       return
     }
 
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   }
 
   if (!_.isNil(label)) {
diff --git a/src/elements/Icon/Icon.js b/src/elements/Icon/Icon.js
index 1e180fcecd..79d1f67882 100644
--- a/src/elements/Icon/Icon.js
+++ b/src/elements/Icon/Icon.js
@@ -83,7 +83,7 @@ const Icon = React.forwardRef(function (props, ref) {
       return
     }
 
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   })
 
   return (
diff --git a/src/elements/Input/Input.js b/src/elements/Input/Input.js
index 7f830a4a65..3822abd8dc 100644
--- a/src/elements/Input/Input.js
+++ b/src/elements/Input/Input.js
@@ -72,7 +72,7 @@ const Input = React.forwardRef(function (props, ref) {
   const handleChange = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onChange', e, { ...props, value: newValue })
+    props.onChange?.(e, { ...props, value: newValue })
   }
 
   const partitionProps = () => {
diff --git a/src/elements/Label/Label.js b/src/elements/Label/Label.js
index 30abb13cde..8df4b0019d 100644
--- a/src/elements/Label/Label.js
+++ b/src/elements/Label/Label.js
@@ -78,7 +78,7 @@ const Label = React.forwardRef(function (props, ref) {
   const ElementType = getElementType(Label, props)
 
   const handleClick = useEventCallback((e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   })
 
   if (!childrenUtils.isNil(children)) {
@@ -102,8 +102,8 @@ const Label = React.forwardRef(function (props, ref) {
           autoGenerateKey: false,
           overrideProps: (predefinedProps) => ({
             onClick: (e) => {
-              _.invoke(predefinedProps, 'onClick', e)
-              _.invoke(props, 'onRemove', e, props)
+              predefinedProps.onClick?.(e)
+              props.onRemove?.(e, props)
             },
           }),
         })}
diff --git a/src/elements/List/List.js b/src/elements/List/List.js
index f805838b3c..eb74b62d18 100644
--- a/src/elements/List/List.js
+++ b/src/elements/List/List.js
@@ -88,8 +88,8 @@ const List = React.forwardRef(function (props, ref) {
         ListItem.create(item, {
           overrideProps: (predefinedProps) => ({
             onClick: (e, itemProps) => {
-              _.invoke(predefinedProps, 'onClick', e, itemProps)
-              _.invoke(props, 'onItemClick', e, itemProps)
+              predefinedProps.onClick?.(e, itemProps)
+              props.onItemClick?.(e, itemProps)
             },
           }),
         }),
diff --git a/src/elements/List/ListItem.js b/src/elements/List/ListItem.js
index c0fba5fb72..b0afbe19ce 100644
--- a/src/elements/List/ListItem.js
+++ b/src/elements/List/ListItem.js
@@ -46,7 +46,7 @@ const ListItem = React.forwardRef(function (props, ref) {
 
   const handleClick = useEventCallback((e) => {
     if (!disabled) {
-      _.invoke(props, 'onClick', e, props)
+      props.onClick?.(e, props)
     }
   })
   const valueProp = ElementType === 'li' ? { value } : { 'data-value': value }
diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js
index bebf135191..349d87f9db 100644
--- a/src/elements/Step/Step.js
+++ b/src/elements/Step/Step.js
@@ -39,7 +39,7 @@ const Step = React.forwardRef(function (props, ref) {
 
   const handleClick = useEventCallback((e) => {
     if (!disabled) {
-      _.invoke(props, 'onClick', e, props)
+      props.onClick?.(e, props)
     }
   })
 
diff --git a/src/lib/ModernAutoControlledComponent.js b/src/lib/ModernAutoControlledComponent.js
index 90fd7c4f6a..fc6cd4fa75 100644
--- a/src/lib/ModernAutoControlledComponent.js
+++ b/src/lib/ModernAutoControlledComponent.js
@@ -72,7 +72,7 @@ export default class ModernAutoControlledComponent extends React.Component {
     super(...args)
 
     const { autoControlledProps, getAutoControlledStateFromProps } = this.constructor
-    const state = _.invoke(this, 'getInitialAutoControlledState', this.props) || {}
+    const state = this.getInitialAutoControlledState?.(this.props) || {}
 
     if (process.env.NODE_ENV !== 'production') {
       const { defaultProps, name, propTypes, getDerivedStateFromProps } = this.constructor
diff --git a/src/lib/doesNodeContainClick.js b/src/lib/doesNodeContainClick.js
index d400098eeb..c44d24b04a 100644
--- a/src/lib/doesNodeContainClick.js
+++ b/src/lib/doesNodeContainClick.js
@@ -16,10 +16,10 @@ const doesNodeContainClick = (node, e) => {
 
   // if there is an e.target and it is in the document, use a simple node.contains() check
   if (e.target) {
-    _.invoke(e.target, 'setAttribute', 'data-suir-click-target', true)
+    e.target.setAttribute?.('data-suir-click-target', true)
 
     if (document.querySelector('[data-suir-click-target=true]')) {
-      _.invoke(e.target, 'removeAttribute', 'data-suir-click-target')
+      e.target.removeAttribute?.('data-suir-click-target')
 
       if (typeof node.contains === 'function') {
         return node.contains(e.target)
diff --git a/src/modules/Accordion/AccordionAccordion.js b/src/modules/Accordion/AccordionAccordion.js
index 8b6227d7f5..6a5454948f 100644
--- a/src/modules/Accordion/AccordionAccordion.js
+++ b/src/modules/Accordion/AccordionAccordion.js
@@ -60,7 +60,7 @@ const AccordionAccordion = React.forwardRef(function (props, ref) {
     const { index } = titleProps
 
     setActiveIndex(computeNewIndex(exclusive, activeIndex, index))
-    _.invoke(props, 'onTitleClick', e, titleProps)
+    props.onTitleClick?.(e, titleProps)
   })
 
   if (process.env.NODE_ENV !== 'production') {
diff --git a/src/modules/Accordion/AccordionPanel.js b/src/modules/Accordion/AccordionPanel.js
index b66acce997..00ffa32481 100644
--- a/src/modules/Accordion/AccordionPanel.js
+++ b/src/modules/Accordion/AccordionPanel.js
@@ -12,8 +12,8 @@ import AccordionContent from './AccordionContent'
 class AccordionPanel extends Component {
   handleTitleOverrides = (predefinedProps) => ({
     onClick: (e, titleProps) => {
-      _.invoke(predefinedProps, 'onClick', e, titleProps)
-      _.invoke(this.props, 'onTitleClick', e, titleProps)
+      predefinedProps.onClick?.(e, titleProps)
+      this.props.onTitleClick?.(e, titleProps)
     },
   })
 
diff --git a/src/modules/Accordion/AccordionTitle.js b/src/modules/Accordion/AccordionTitle.js
index f9c7ef7fde..52b0c7c396 100644
--- a/src/modules/Accordion/AccordionTitle.js
+++ b/src/modules/Accordion/AccordionTitle.js
@@ -26,7 +26,7 @@ const AccordionTitle = React.forwardRef(function (props, ref) {
   const iconValue = _.isNil(icon) ? 'dropdown' : icon
 
   const handleClick = useEventCallback((e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   })
 
   if (!childrenUtils.isNil(children)) {
diff --git a/src/modules/Checkbox/Checkbox.js b/src/modules/Checkbox/Checkbox.js
index 00eeeb80a6..c6630ba30a 100644
--- a/src/modules/Checkbox/Checkbox.js
+++ b/src/modules/Checkbox/Checkbox.js
@@ -96,7 +96,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
 
     debug('handleChange()', _.get(e, 'target.tagName'))
 
-    _.invoke(props, 'onChange', e, {
+    props.onChange?.(e, {
       ...props,
       checked: !checked,
       indeterminate: false,
@@ -108,8 +108,8 @@ const Checkbox = React.forwardRef(function (props, ref) {
   const handleClick = (e) => {
     debug('handleClick()', _.get(e, 'target.tagName'))
 
-    const isInputClick = _.invoke(inputRef.current, 'contains', e.target)
-    const isLabelClick = _.invoke(labelRef.current, 'contains', e.target)
+    const isInputClick = inputRef.current.contains?.(e.target)
+    const isLabelClick = labelRef.current.contains?.(e.target)
     const isRootClick = !isLabelClick && !isInputClick
 
     const hasId = !_.isNil(id)
@@ -117,7 +117,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
 
     // https://github.com/Semantic-Org/Semantic-UI-React/pull/3351
     if (!isLabelClickAndForwardedToInput) {
-      _.invoke(props, 'onClick', e, {
+      props.onClick?.(e, {
         ...props,
         checked: !checked,
         indeterminate: !!indeterminate,
@@ -147,14 +147,14 @@ const Checkbox = React.forwardRef(function (props, ref) {
   const handleMouseDown = (e) => {
     debug('handleMouseDown()')
 
-    _.invoke(props, 'onMouseDown', e, {
+    props.onMouseDown?.(e, {
       ...props,
       checked: !!checked,
       indeterminate: !!indeterminate,
     })
 
     if (!e.defaultPrevented) {
-      _.invoke(inputRef.current, 'focus')
+      inputRef.current?.focus?.()
     }
 
     // Heads up!
@@ -166,7 +166,7 @@ const Checkbox = React.forwardRef(function (props, ref) {
     debug('handleMouseUp()')
 
     isClickFromMouse.current = true
-    _.invoke(props, 'onMouseUp', e, {
+    props.onMouseUp?.(e, {
       ...props,
       checked: !!checked,
       indeterminate: !!indeterminate,
diff --git a/src/modules/Dimmer/DimmerInner.js b/src/modules/Dimmer/DimmerInner.js
index 78680f065b..1283ea36f9 100644
--- a/src/modules/Dimmer/DimmerInner.js
+++ b/src/modules/Dimmer/DimmerInner.js
@@ -47,13 +47,13 @@ const DimmerInner = React.forwardRef(function (props, ref) {
   }, [active])
 
   const handleClick = (e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
 
     if (contentRef.current !== e.target && doesNodeContainClick(contentRef.current, e)) {
       return
     }
 
-    _.invoke(props, 'onClickOutside', e, props)
+    props.onClickOutside?.(e, props)
   }
 
   const classes = cx(
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 7c7a8a5bcd..25f72ceb30 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -194,7 +194,7 @@ class DropdownInner extends Component {
   // can't rely on props.value if we are controlled
   handleChange = (e, value) => {
     debug('handleChange()', value)
-    _.invoke(this.props, 'onChange', e, { ...this.props, value })
+    this.props.onChange?.(e, { ...this.props, value })
   }
 
   closeOnChange = (e) => {
@@ -305,7 +305,7 @@ class DropdownInner extends Component {
       // Heads up! This event handler should be called after `onChange`
       // Notify the onAddItem prop if this is a new value
       if (item['data-additional']) {
-        _.invoke(this.props, 'onAddItem', e, { ...this.props, value: selectedValue })
+        this.props.onAddItem?.(e, { ...this.props, value: selectedValue })
       }
     }
 
@@ -374,7 +374,7 @@ class DropdownInner extends Component {
     this.clearSearchQuery()
 
     if (search) {
-      _.invoke(this.searchRef.current, 'focus')
+      this.searchRef.current?.focus?.()
     }
   }
 
@@ -415,7 +415,7 @@ class DropdownInner extends Component {
     debug('handleMouseDown()')
 
     this.isMouseDown = true
-    _.invoke(this.props, 'onMouseDown', e, this.props)
+    this.props.onMouseDown?.(e, this.props)
     document.addEventListener('mouseup', this.handleDocumentMouseUp)
   }
 
@@ -432,20 +432,20 @@ class DropdownInner extends Component {
     const { minCharacters, search } = this.props
     const { open, searchQuery } = this.state
 
-    _.invoke(this.props, 'onClick', e, this.props)
+    this.props.onClick?.(e, this.props)
     // prevent closeOnDocumentClick()
     e.stopPropagation()
 
     if (!search) return this.toggle(e)
     if (open) {
-      _.invoke(this.searchRef.current, 'focus')
+      this.searchRef.current?.focus?.()
       return
     }
     if (searchQuery.length >= minCharacters || minCharacters === 1) {
       this.open(e)
       return
     }
-    _.invoke(this.searchRef.current, 'focus')
+    this.searchRef.current?.focus?.()
   }
 
   handleIconClick = (e) => {
@@ -453,7 +453,7 @@ class DropdownInner extends Component {
     const hasValue = this.hasValue()
     debug('handleIconClick()', { e, clearable, hasValue })
 
-    _.invoke(this.props, 'onClick', e, this.props)
+    this.props.onClick?.(e, this.props)
     // prevent handleClick()
     e.stopPropagation()
 
@@ -497,9 +497,9 @@ class DropdownInner extends Component {
     this.clearSearchQuery()
 
     if (search) {
-      _.invoke(this.searchRef.current, 'focus')
+      this.searchRef.current?.focus?.()
     } else {
-      _.invoke(this.ref.current, 'focus')
+      this.ref.current?.focus?.()
     }
 
     this.closeOnChange(e)
@@ -507,7 +507,7 @@ class DropdownInner extends Component {
     // Heads up! This event handler should be called after `onChange`
     // Notify the onAddItem prop if this is a new value
     if (isAdditionItem) {
-      _.invoke(this.props, 'onAddItem', e, { ...this.props, value })
+      this.props.onAddItem?.(e, { ...this.props, value })
     }
   }
 
@@ -517,7 +517,7 @@ class DropdownInner extends Component {
 
     if (focus) return
 
-    _.invoke(this.props, 'onFocus', e, this.props)
+    this.props.onFocus?.(e, this.props)
     this.setState({ focus: true })
   }
 
@@ -533,7 +533,7 @@ class DropdownInner extends Component {
     // do not "blur" when the mouse is down inside of the Dropdown
     if (this.isMouseDown) return
 
-    _.invoke(this.props, 'onBlur', e, this.props)
+    this.props.onBlur?.(e, this.props)
 
     if (selectOnBlur && !multiple) {
       this.makeSelectedItemActive(e, this.state.selectedIndex)
@@ -555,7 +555,7 @@ class DropdownInner extends Component {
     const { open } = this.state
     const newQuery = value
 
-    _.invoke(this.props, 'onSearchChange', e, { ...this.props, searchQuery: newQuery })
+    this.props.onSearchChange?.(e, { ...this.props, searchQuery: newQuery })
     this.setState({ searchQuery: newQuery, selectedIndex: 0 })
 
     // open search dropdown on search query
@@ -573,7 +573,7 @@ class DropdownInner extends Component {
     this.openOnSpace(e)
     this.selectItemOnEnter(e)
 
-    _.invoke(this.props, 'onKeyDown', e)
+    this.props.onKeyDown?.(e)
   }
 
   // ----------------------------------------
@@ -648,7 +648,7 @@ class DropdownInner extends Component {
     e.stopPropagation()
 
     this.setState({ selectedLabel: labelProps.value })
-    _.invoke(this.props, 'onLabelClick', e, labelProps)
+    this.props.onLabelClick?.(e, labelProps)
   }
 
   handleLabelRemove = (e, labelProps) => {
@@ -720,7 +720,7 @@ class DropdownInner extends Component {
     return {
       className: classes,
       onClick: (e) => {
-        _.invoke(predefinedProps, 'onClick', e, predefinedProps)
+        predefinedProps.onClick?.(e, predefinedProps)
         this.handleIconClick(e)
       },
     }
@@ -771,7 +771,7 @@ class DropdownInner extends Component {
 
   handleSearchInputOverrides = (predefinedProps) => ({
     onChange: (e, inputProps) => {
-      _.invoke(predefinedProps, 'onChange', e, inputProps)
+      predefinedProps.onChange?.(e, inputProps)
       this.handleSearchChange(e, inputProps)
     },
     ref: this.searchRef,
@@ -834,9 +834,9 @@ class DropdownInner extends Component {
     debug('open()', { disabled, search, open: this.state.open })
 
     if (disabled) return
-    if (search) _.invoke(this.searchRef.current, 'focus')
+    if (search) this.searchRef.current?.focus?.()
 
-    _.invoke(this.props, 'onOpen', e, this.props)
+    this.props.onOpen?.(e, this.props)
 
     if (triggerSetState) {
       this.setState({ open: true })
@@ -848,7 +848,7 @@ class DropdownInner extends Component {
     debug('close()', { open: this.state.open })
 
     if (this.state.open) {
-      _.invoke(this.props, 'onClose', e, this.props)
+      this.props.onClose?.(e, this.props)
       this.setState({ open: false }, callback)
     }
   }
diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
index 5f4fb65419..8e982ae2a2 100644
--- a/src/modules/Dropdown/DropdownItem.js
+++ b/src/modules/Dropdown/DropdownItem.js
@@ -37,7 +37,7 @@ const DropdownItem = React.forwardRef(function (props, ref) {
   } = props
 
   const handleClick = (e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   }
 
   const classes = cx(
diff --git a/src/modules/Dropdown/DropdownSearchInput.js b/src/modules/Dropdown/DropdownSearchInput.js
index 8f46f28f1c..4e9ce6e04a 100644
--- a/src/modules/Dropdown/DropdownSearchInput.js
+++ b/src/modules/Dropdown/DropdownSearchInput.js
@@ -14,7 +14,7 @@ const DropdownSearchInput = React.forwardRef(function (props, ref) {
   const handleChange = (e) => {
     const newValue = _.get(e, 'target.value')
 
-    _.invoke(props, 'onChange', e, { ...props, value: newValue })
+    props.onChange?.(e, { ...props, value: newValue })
   }
 
   const classes = cx('search', className)
diff --git a/src/modules/Embed/Embed.js b/src/modules/Embed/Embed.js
index 06dddd6bff..4fbecd3df2 100644
--- a/src/modules/Embed/Embed.js
+++ b/src/modules/Embed/Embed.js
@@ -70,7 +70,7 @@ const Embed = React.forwardRef(function (props, ref) {
   }
 
   const handleClick = (e) => {
-    _.invoke(props, 'onClick', e, { ...props, active: true })
+    props.onClick?.(e, { ...props, active: true })
     if (!active) {
       setActive(true)
     }
diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js
index cf35c358bb..42596fca93 100644
--- a/src/modules/Modal/Modal.js
+++ b/src/modules/Modal/Modal.js
@@ -108,7 +108,7 @@ const Modal = React.forwardRef(function (props, ref) {
     debug('close()')
 
     setOpen(false)
-    _.invoke(props, 'onClose', e, { ...props, open: false })
+    props.onClose?.(e, { ...props, open: false })
   }
 
   const handleDocumentMouseDown = (e) => {
@@ -129,14 +129,14 @@ const Modal = React.forwardRef(function (props, ref) {
       return
 
     setOpen(false)
-    _.invoke(props, 'onClose', e, { ...props, open: false })
+    props.onClose?.(e, { ...props, open: false })
   }
 
   const handleOpen = (e) => {
     debug('open()')
 
     setOpen(true)
-    _.invoke(props, 'onOpen', e, { ...props, open: true })
+    props.onOpen?.(e, { ...props, open: true })
   }
 
   const handlePortalMount = (e) => {
@@ -153,7 +153,7 @@ const Modal = React.forwardRef(function (props, ref) {
       pool: eventPool,
       target: dimmerRef.current,
     })
-    _.invoke(props, 'onMount', e, props)
+    props.onMount?.(e, props)
   }
 
   const handlePortalUnmount = (e) => {
@@ -168,7 +168,7 @@ const Modal = React.forwardRef(function (props, ref) {
       pool: eventPool,
       target: dimmerRef.current,
     })
-    _.invoke(props, 'onUnmount', e, props)
+    props.onUnmount?.(e, props)
   }
 
   // ----------------------------------------
@@ -191,7 +191,7 @@ const Modal = React.forwardRef(function (props, ref) {
     const closeIconJSX = Icon.create(closeIconName, {
       overrideProps: (predefinedProps) => ({
         onClick: (e) => {
-          _.invoke(predefinedProps, 'onClick', e)
+          predefinedProps.onClick?.(e)
           handleClose(e)
         },
       }),
@@ -212,8 +212,8 @@ const Modal = React.forwardRef(function (props, ref) {
             {ModalActions.create(actions, {
               overrideProps: (predefinedProps) => ({
                 onActionClick: (e, actionProps) => {
-                  _.invoke(predefinedProps, 'onActionClick', e, actionProps)
-                  _.invoke(props, 'onActionClick', e, props)
+                  predefinedProps.onActionClick?.(e, actionProps)
+                  props.onActionClick?.(e, props)
 
                   handleClose(e)
                 },
diff --git a/src/modules/Modal/ModalActions.js b/src/modules/Modal/ModalActions.js
index 37bf007bea..cf39ec3574 100644
--- a/src/modules/Modal/ModalActions.js
+++ b/src/modules/Modal/ModalActions.js
@@ -43,8 +43,8 @@ const ModalActions = React.forwardRef(function (props, ref) {
         Button.create(action, {
           overrideProps: (predefinedProps) => ({
             onClick: (e, buttonProps) => {
-              _.invoke(predefinedProps, 'onClick', e, buttonProps)
-              _.invoke(props, 'onActionClick', e, buttonProps)
+              predefinedProps.onClick?.(e, buttonProps)
+              props.onActionClick?.(e, buttonProps)
             },
           }),
         }),
diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js
index f6d1111ed1..49f96120d6 100644
--- a/src/modules/Popup/Popup.js
+++ b/src/modules/Popup/Popup.js
@@ -169,12 +169,12 @@ const Popup = React.forwardRef(function (props, ref) {
 
   const handleClose = (e) => {
     debug('handleClose()')
-    _.invoke(props, 'onClose', e, { ...props, open: false })
+    props.onClose?.(e, { ...props, open: false })
   }
 
   const handleOpen = (e) => {
     debug('handleOpen()')
-    _.invoke(props, 'onOpen', e, { ...props, open: true })
+    props.onOpen?.(e, { ...props, open: true })
   }
 
   const hideOnScroll = (e) => {
@@ -197,14 +197,14 @@ const Popup = React.forwardRef(function (props, ref) {
 
   const handlePortalMount = (e) => {
     debug('handlePortalMount()')
-    _.invoke(props, 'onMount', e, props)
+    props.onMount?.(e, props)
   }
 
   const handlePortalUnmount = (e) => {
     debug('handlePortalUnmount()')
 
     positionUpdate.current = null
-    _.invoke(props, 'onUnmount', e, props)
+    props.onUnmount?.(e, props)
   }
 
   // ----------------------------------------
diff --git a/src/modules/Popup/lib/createReferenceProxy.js b/src/modules/Popup/lib/createReferenceProxy.js
index 1d7da1c147..80a84d2857 100644
--- a/src/modules/Popup/lib/createReferenceProxy.js
+++ b/src/modules/Popup/lib/createReferenceProxy.js
@@ -7,7 +7,7 @@ class ReferenceProxy {
   }
 
   getBoundingClientRect() {
-    return _.invoke(this.ref.current, 'getBoundingClientRect') || {}
+    return this.ref.current?.getBoundingClientRect?.() || {}
   }
 
   get clientWidth() {
diff --git a/src/modules/Rating/Rating.js b/src/modules/Rating/Rating.js
index f4bf35a6d9..1e38b5a421 100644
--- a/src/modules/Rating/Rating.js
+++ b/src/modules/Rating/Rating.js
@@ -58,7 +58,7 @@ const Rating = React.forwardRef(function (props, ref) {
     setRating(newRating)
     setIsSelecting(false)
 
-    _.invoke(props, 'onRate', e, { ...props, rating: newRating })
+    props.onRate?.(e, { ...props, rating: newRating })
   }
 
   const handleIconMouseEnter = (e, { index }) => {
@@ -71,7 +71,7 @@ const Rating = React.forwardRef(function (props, ref) {
   }
 
   const handleMouseLeave = (...args) => {
-    _.invoke(props, 'onMouseLeave', ...args)
+    props.onMouseLeave?.(...args)
 
     if (disabled) {
       return
diff --git a/src/modules/Rating/RatingIcon.js b/src/modules/Rating/RatingIcon.js
index 22cc558e09..c7ed721e09 100644
--- a/src/modules/Rating/RatingIcon.js
+++ b/src/modules/Rating/RatingIcon.js
@@ -22,24 +22,24 @@ const RatingIcon = React.forwardRef(function (props, ref) {
   const ElementType = getElementType(RatingIcon, props)
 
   const handleClick = (e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   }
 
   const handleKeyUp = (e) => {
-    _.invoke(props, 'onKeyUp', e, props)
+    props.onKeyUp?.(e, props)
 
     switch (keyboardKey.getCode(e)) {
       case keyboardKey.Enter:
       case keyboardKey.Spacebar:
         e.preventDefault()
-        _.invoke(props, 'onClick', e, props)
+        props.onClick?.(e, props)
         break
       default:
     }
   }
 
   const handleMouseEnter = (e) => {
-    _.invoke(props, 'onMouseEnter', e, props)
+    props.onMouseEnter?.(e, props)
   }
 
   return (
diff --git a/src/modules/Search/Search.js b/src/modules/Search/Search.js
index 8cfd84fda9..7f2110f43c 100644
--- a/src/modules/Search/Search.js
+++ b/src/modules/Search/Search.js
@@ -133,14 +133,14 @@ class SearchInner extends Component {
     debug('handleResultSelect()')
     debug(result)
 
-    _.invoke(this.props, 'onResultSelect', e, { ...this.props, result })
+    this.props.onResultSelect?.(e, { ...this.props, result })
   }
 
   handleSelectionChange = (e) => {
     debug('handleSelectionChange()')
 
     const result = this.getSelectedResult()
-    _.invoke(this.props, 'onSelectionChange', e, { ...this.props, result })
+    this.props.onSelectionChange?.(e, { ...this.props, result })
   }
 
   closeOnEscape = (e) => {
@@ -198,7 +198,7 @@ class SearchInner extends Component {
     debug('handleMouseDown()')
 
     this.isMouseDown = true
-    _.invoke(this.props, 'onMouseDown', e, this.props)
+    this.props.onMouseDown?.(e, this.props)
     eventStack.sub('mouseup', this.handleDocumentMouseUp)
   }
 
@@ -243,14 +243,14 @@ class SearchInner extends Component {
   handleFocus = (e) => {
     debug('handleFocus()')
 
-    _.invoke(this.props, 'onFocus', e, this.props)
+    this.props.onFocus?.(e, this.props)
     this.setState({ focus: true })
   }
 
   handleBlur = (e) => {
     debug('handleBlur()')
 
-    _.invoke(this.props, 'onBlur', e, this.props)
+    this.props.onBlur?.(e, this.props)
     this.setState({ focus: false })
   }
 
@@ -263,7 +263,7 @@ class SearchInner extends Component {
     const { open } = this.state
     const newQuery = e.target.value
 
-    _.invoke(this.props, 'onSearchChange', e, { ...this.props, value: newQuery })
+    this.props.onSearchChange?.(e, { ...this.props, value: newQuery })
 
     // open search dropdown on search query
     if (newQuery.length < minCharacters) {
diff --git a/src/modules/Search/SearchResult.js b/src/modules/Search/SearchResult.js
index 69f3ac5239..c3a00eaa3c 100644
--- a/src/modules/Search/SearchResult.js
+++ b/src/modules/Search/SearchResult.js
@@ -35,7 +35,7 @@ const SearchResult = React.forwardRef(function (props, ref) {
   const { active, className, renderer } = props
 
   const handleClick = (e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   }
 
   const classes = cx(useKeyOnly(active, 'active'), 'result', className)
diff --git a/src/modules/Sidebar/Sidebar.js b/src/modules/Sidebar/Sidebar.js
index 764c16178e..4e085c567a 100644
--- a/src/modules/Sidebar/Sidebar.js
+++ b/src/modules/Sidebar/Sidebar.js
@@ -62,7 +62,7 @@ const Sidebar = React.forwardRef((props, ref) => {
     const callback = visible ? 'onShow' : 'onHidden'
 
     resetAnimationTick()
-    _.invoke(props, callback, null, props)
+    props[callback]?.(null, props)
   })
 
   const handleAnimationStart = useEventCallback(() => {
@@ -76,13 +76,13 @@ const Sidebar = React.forwardRef((props, ref) => {
       return
     }
 
-    _.invoke(props, callback, null, props)
+    props[callback]?.(null, props)
   })
 
   const handleDocumentClick = (e) => {
     if (!doesNodeContainClick(elementRef.current, e)) {
       skipNextCallback.current = true
-      _.invoke(props, 'onHide', e, { ...props, visible: false })
+      props.onHide?.(e, { ...props, visible: false })
     }
   }
 
diff --git a/src/modules/Sticky/Sticky.js b/src/modules/Sticky/Sticky.js
index ab8c821c9a..f4c97189dd 100644
--- a/src/modules/Sticky/Sticky.js
+++ b/src/modules/Sticky/Sticky.js
@@ -100,28 +100,28 @@ const Sticky = React.forwardRef(function (props, ref) {
     setBound(newBound)
     setSticky(true)
 
-    _.invoke(props, 'onStick', e, props)
+    props.onStick?.(e, props)
   }
 
   const setUnsticked = (e, newBound) => {
     setBound(newBound)
     setSticky(false)
 
-    _.invoke(props, 'onUnstick', e, props)
+    props.onUnstick?.(e, props)
   }
 
   const stickToContextBottom = (e) => {
     setSticked(e, true)
     togglePushing(true)
 
-    _.invoke(props, 'onBottom', e, props)
+    props.onBottom?.(e, props)
   }
 
   const stickToContextTop = (e) => {
     setUnsticked(e, false)
     togglePushing(false)
 
-    _.invoke(props, 'onTop', e, props)
+    props.onTop?.(e, props)
   }
 
   const stickToScreenBottom = (e) => {
diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
index 3004f4ceda..f31b04da0d 100644
--- a/src/modules/Tab/Tab.js
+++ b/src/modules/Tab/Tab.js
@@ -28,13 +28,13 @@ const Tab = React.forwardRef(function (props, ref) {
   })
 
   const handleItemClick = (e, { index }) => {
-    _.invoke(props, 'onTabChange', e, { ...props, activeIndex: index })
+    props.onTabChange?.(e, { ...props, activeIndex: index })
     setActiveIndex(index)
   }
 
   const renderItems = () => {
     if (renderActiveOnly) {
-      return _.invoke(_.get(panes, `[${activeIndex}]`), 'render', props)
+      return panes?.[activeIndex]?.render?.(props)
     }
 
     return _.map(panes, ({ pane }, index) =>
diff --git a/src/modules/Transition/Transition.js b/src/modules/Transition/Transition.js
index 3ad3c88018..46b677cc5d 100644
--- a/src/modules/Transition/Transition.js
+++ b/src/modules/Transition/Transition.js
@@ -97,14 +97,14 @@ export default class Transition extends React.Component {
     }
 
     if (!prevState.animating && this.state.animating) {
-      _.invoke(this.props, 'onStart', null, { ...this.props, status: this.state.status })
+      this.props.onStart?.(null, { ...this.props, status: this.state.status })
     }
 
     if (prevState.animating && !this.state.animating) {
       const callback = this.state.status === TRANSITION_STATUS_ENTERED ? 'onShow' : 'onHide'
 
-      _.invoke(this.props, 'onComplete', null, { ...this.props, status: this.state.status })
-      _.invoke(this.props, callback, null, { ...this.props, status: this.state.status })
+      this.props.onComplete?.(null, { ...this.props, status: this.state.status })
+      this.props[callback]?.(null, { ...this.props, status: this.state.status })
     }
   }
 
diff --git a/src/views/Card/Card.js b/src/views/Card/Card.js
index 13cefed144..e36cf767bc 100644
--- a/src/views/Card/Card.js
+++ b/src/views/Card/Card.js
@@ -59,7 +59,7 @@ const Card = React.forwardRef(function (props, ref) {
   })
 
   const handleClick = useEventCallback((e) => {
-    _.invoke(props, 'onClick', e, props)
+    props.onClick?.(e, props)
   })
 
   if (!childrenUtils.isNil(children)) {