diff --git a/package.json b/package.json
index 62ef277..a7544eb 100644
--- a/package.json
+++ b/package.json
@@ -61,8 +61,8 @@
     "husky": "4.3.0",
     "lint-staged": "10.4.0",
     "prettier": "2.1.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "2.26.5",
     "rollup-plugin-peer-deps-external": "2.2.3",
     "rollup-plugin-terser": "5.3.0",
diff --git a/src/components/ContentEditable/ContentEditable.jsx b/src/components/ContentEditable/ContentEditable.jsx
index 3eec0f0..5bd7c07 100644
--- a/src/components/ContentEditable/ContentEditable.jsx
+++ b/src/components/ContentEditable/ContentEditable.jsx
@@ -28,8 +28,8 @@ const replaceCaret = (el, activateAfterChange) => {
 };
 
 export class ContentEditable extends Component {
-  constructor({value = undefined, placeholder = "", disabled = false, activateAfterChange = false, autoFocus = false, onChange = () => {}, onKeyPress = () => {}, ...rest}) {
-    super({value, placeholder,disabled, activateAfterChange, autoFocus, onChange, onKeyPress, ...rest});
+  constructor(props) {
+    super(props);
     this.msgRef = React.createRef();
   }
 
@@ -47,7 +47,7 @@ export class ContentEditable extends Component {
     const {
       props: { onKeyPress },
     } = this;
-    onKeyPress(evt);
+    onKeyPress?.(evt);
   };
 
   handleInput = (evt) => {
@@ -56,7 +56,7 @@ export class ContentEditable extends Component {
     } = this;
 
     const target = evt.target;
-    onChange(target.innerHTML, target.textContent, target.innerText);
+    onChange?.(target.innerHTML, target.textContent, target.innerText);
   };
 
   // Public API
diff --git a/src/components/ConversationHeader/ConversationHeaderContent.jsx b/src/components/ConversationHeader/ConversationHeaderContent.jsx
index 4cb3919..223f3a2 100644
--- a/src/components/ConversationHeader/ConversationHeaderContent.jsx
+++ b/src/components/ConversationHeader/ConversationHeaderContent.jsx
@@ -4,10 +4,10 @@ import classNames from "classnames";
 import { prefix } from "../settings";
 
 export const ConversationHeaderContent = ({
-  userName,
+  userName = "",
   info = "",
   children = undefined,
-  className = "",
+  className,
   ...rest
 }) => {
   const cName = `${prefix}-conversation-header__content`;
diff --git a/src/components/Loader/Loader.jsx b/src/components/Loader/Loader.jsx
index 4a1289e..4eb02fe 100644
--- a/src/components/Loader/Loader.jsx
+++ b/src/components/Loader/Loader.jsx
@@ -3,7 +3,12 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import { prefix } from "../settings";
 
-export const Loader = ({ className = undefined, variant = "default", children = undefined, ...rest }) => {
+export const Loader = ({
+  className = undefined,
+  variant = "default",
+  children,
+  ...rest
+}) => {
   const cName = `${prefix}-loader`;
   const textClass =
     React.Children.count(children) > 0 ? `${cName}--content` : "";
diff --git a/src/components/MessageList/MessageList.jsx b/src/components/MessageList/MessageList.jsx
index 7f15852..977a2b5 100644
--- a/src/components/MessageList/MessageList.jsx
+++ b/src/components/MessageList/MessageList.jsx
@@ -12,18 +12,8 @@ import MessageSeparator from "../MessageSeparator";
 import MessageListContent from "./MessageListContent";
 
 class MessageListInner extends React.Component {
-  constructor({
-                typingIndicator = undefined,
-                loading = false,
-                loadingMore = false,
-                loadingMorePosition = "top",
-                disableOnYReachWhenNoScroll = false,
-                autoScrollToBottom = true,
-                autoScrollToBottomOnMount = true,
-                scrollBehavior = "auto",
-                ...rest
-  }) {
-    super({typingIndicator, loading, loadingMore, loadingMorePosition, disableOnYReachWhenNoScroll, autoScrollToBottom, autoScrollToBottomOnMount, scrollBehavior, ...rest});
+  constructor(props) {
+    super(props);
 
     this.scrollPointRef = React.createRef();
     this.containerRef = React.createRef();
@@ -410,9 +400,19 @@ MessageList.propTypes = {
   className: PropTypes.string,
 };
 
-
+MessageList.defaultProps = {
+  typingIndicator: undefined,
+  loading: false,
+  loadingMore: false,
+  loadingMorePosition: "top",
+  disableOnYReachWhenNoScroll: false,
+  autoScrollToBottom: true,
+  autoScrollToBottomOnMount: true,
+  scrollBehavior: "auto",
+};
 
 MessageListInner.propTypes = MessageList.propTypes;
+MessageListInner.defaultProps = MessageList.defaultProps;
 
 MessageList.Content = MessageListContent;
 
diff --git a/src/components/Scroll/ReactPerfectScrollbar.jsx b/src/components/Scroll/ReactPerfectScrollbar.jsx
index d6dde0a..1c57350 100644
--- a/src/components/Scroll/ReactPerfectScrollbar.jsx
+++ b/src/components/Scroll/ReactPerfectScrollbar.jsx
@@ -18,53 +18,15 @@ const handlerNameByEvent = {
 Object.freeze(handlerNameByEvent);
 
 export default class ScrollBar extends Component {
-  constructor({
-    className = "",
-    style = undefined,
-    option = undefined,
-    options = undefined,
-    containerRef = () => {},
-    onScrollY = undefined,
-    onScrollX = undefined,
-    onScrollUp = undefined,
-    onScrollDown = undefined,
-    onScrollLeft = undefined,
-    onScrollRight = undefined,
-    onYReachStart = undefined,
-    onYReachEnd = undefined,
-    onXReachStart = undefined,
-    onXReachEnd = undefined,
-    onSync = (ps) => ps.update(),
-    component = "div",
-    ...rest
-  }) {
-    super({
-      className,
-      style,
-      option,
-      options,
-      containerRef,
-      onScrollX,
-      onScrollY,
-      onScrollUp,
-      onScrollDown,
-      onScrollLeft,
-      onScrollRight,
-      onYReachStart,
-      onYReachEnd,
-      onXReachStart,
-      onXReachEnd,
-      onSync,
-      component,
-      ...rest
-    });
-
+  constructor(props) {
+    super(props);
     this.handleRef = this.handleRef.bind(this);
     this._handlerByEvent = {};
   }
 
   componentDidMount() {
     if (this.props.option) {
+      /* eslint-disable-next-line no-console */
       console.warn(
         'react-perfect-scrollbar: the "option" prop has been deprecated in favor of "options"'
       );
@@ -139,12 +101,17 @@ export default class ScrollBar extends Component {
   }
 
   updateScroll() {
-    this.props.onSync(this._ps);
+    const onSync = this.props.onSync;
+    if (typeof onSync === "function") {
+      onSync(this._ps);
+    } else {
+      this._ps.update();
+    }
   }
 
   handleRef(ref) {
     this._container = ref;
-    this.props.containerRef(ref);
+    this.props.containerRef?.(ref);
   }
 
   render() {
@@ -169,7 +136,8 @@ export default class ScrollBar extends Component {
       children,
       ...remainProps
     } = this.props;
-    const Comp = component;
+
+    const Comp = typeof component === "undefined" ? "div" : component;
 
     return (
       <Comp style={style} ref={this.handleRef} {...remainProps}>
diff --git a/src/components/Scroll/index.jsx b/src/components/Scroll/index.jsx
index e36cd4d..ee9c774 100644
--- a/src/components/Scroll/index.jsx
+++ b/src/components/Scroll/index.jsx
@@ -1,3 +1,3 @@
-import Scrollbar from "./ReactPerfectScrollbar";
+import ScrollBar from "./ReactPerfectScrollbar";
 export * from "./ReactPerfectScrollbar";
-export default Scrollbar;
+export default ScrollBar;