there is tons of resources out there to read about principles of defining components but I am still confused about how exactly we define responsibility of very elemental level components likes of Text so seeking community help.

I am building a text component which is responsible for rendering text based use-cases where text is the only UI blocking component to be displayed. Component structure of Text that I am thinking to define looks similar to below pseudo code.

const Text = ({ text, tooltip, ...textProperties, ...tooltipProperties }) => {

  const renderTooltip = (viewToRender) => {

    if (!tooltip) 
      return <>{viewToRender}</>;

    return <Tooltip text={tooltip} tooltipProperties>
      { viewToRender }
    </Tooltip>;
  }


  const renderText = () => {
    return renderTooltip(<span textProperties>{text}</span>);
  }

  return renderText();
};

export default Text;

I want to understand what all things are wrong in this thought process and why do you think so and how should I think about.