react's memo and UI kit's component (MUI)

Question

I've heard that I must to use memo to wrap component in pair with useCallback, when such type (fn) of props passes in component.

There are a simple example, let's imagine that instead of button we have a smart hard component with huge business logic

import Button from '@mui/material/Button'
import styles from './App.module.scss'
import { useCallback, useState, memo } from 'react'

interface MemoButtonProps {
  text: string, onClick: () => void
}

const MemoButton = memo(function Btn({text, onClick}: MemoButtonProps) {
  return <Button onClick={onClick}>{text}</Button>
})

function App (): JSX.Element {
  const [counter, setCounter] = useState(0)

  const onClick = useCallback(() => {
    setCounter(prevCounter => prevCounter + 1)
  }, [])

  return (
    <div className={styles.wrapper}>
      <strong>{counter}</strong>
      <MemoButton onClick={onClick} text={'Press me, motherfucker!'}\>
    </div>
  )
}

export default App

As I see in Profiler, there are a tons of nested components (HOC?), and I don't know, do I need to use this like that, or I missing something

What I've tried

I used to search MUI docs for memo keyword, but didn't find anything at all. And I haven't find any related questions to other UI kits