Komponent, który zwraca tylko wartość

Czy dobrą praktyką jest stosowanie komponentu w React w którym tylko jest zwracana wartość ? Chodzi o to aby w komponencie była logika, która coś wylicza i później zwraca tylko wartość. Coś podobnego jak poniżej:

import React from 'react';

const DisplayTime = (timeToFormat) => {
  const time = // some calculation;

  return time;
};

export default DisplayTime;

const BuildingTime = () => {
  // jakis state i logika  


  return <DisplayTime timeToFormat={timeToFormatOrSomethingElse}></DisplayTime>;
}

export default BuildingTime

Jak później taki komponent jak DisplayTime przetestować w unit testach skoro nie ma żadnych elementów HTML w sobie ? Czy do takiego komponentu nie pisze się testów ? Czy po prostu testuje się jak funkcję ?

od tego są custom hooks

Czyli złą praktyką jest dodawanie takiego komponentu ? Powinien być on custom hookiem ?

Przecież DisplayTime to nawet nie jest komponent reactowy tylko funkcja. Skoro coś jest funkcją, to po co mieszać w to Reacta? Testujesz funkcję oddzielnie.

import React from 'react';

const displayTime = (timeToFormat) => {
 const time = // some calculation;

 return time;
};

export default DisplayTime;

const BuildingTime = () => {
 // jakis state i logika  


  return <p>{displayTime(new Date())}</p>;
}

export default BuildingTime

Na upartego możesz zwracać ReactNode, ale wtedy nie masz już wprost dostępu do wyniku DisplayTime.

import React from 'react';

const DisplayTime = (timeToFormat) => {
 const time = // some calculation;

 return <>{time}</>;
};

export default DisplayTime;