[React Native](Best practice) is creating sub component in the same components better than putting everything in the component without subdivisions

Question

I often encounter this situation when I'm coding in react native, and I have a complex component, I would like to simplify the reading or in some cases factorize the code (but not reuse that code in another component).

The three ways I see of coding this are:

First:

const parentComponent = (): JSX.Element => {
  const templateComponentA = (): JSX.Element => <>... A content ...</>;
  const templateComponentB = (): JSX.Element => <>... B content ...</>;
  const templateComponentC = (): JSX.Element => <>... C content ...</>;

  return (<>
    ... parent content ...
    <templateComponentA/>
    <templateComponentB/>
    <templateComponentC/>
    ... more parent content ...
  </>)
}

export default parentComponent;

Second:

const parentComponent = (): JSX.Element => {
  return (<>
    ... parent content ...
    ... A content ...
    ... B content ...
    ... C content ...
    ... more parent content ...
  </>)
}

export default parentComponent;

The last case is having each component in a different file, but I think this is disqualified as if the parent component has a state that it is used in the template components, these template components must have possibly multiple inputs and outputs and that is clearly not a good solution.

Which method is considered to be best practice? (I'm trying to build an app using react native, and I would like to do it right :D )