extracting part of render as a const in react

Question

I see my colleague has used this practice in react, not sure if it's a good or bad one, or if it has a performance issue. Since the pageTitle will be regenerated in each render.

Is it better to convert it to a component with useCallback or wrap it up with useMemo

const pageTitle = (
  <div>
    <span> Title </span>
    <Badge badgeContent={4} color="primary">
      <MailIcon color="action" />
    </Badge>
  </div>
)

return (
  <>
    <Header title={pageTitle} />
    ...
  </>
)