The tag <text> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

Problem

I just tried to build a component via styled components on vite. But, When I try to use text from styled components, It throws an error on console:

Warning: The tag <text> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    at text
    at O2 (http://localhost:5173/node_modules/.vite/deps/styled-components.js?v=b320d886:1423:6)
    at TextView (http://localhost:5173/src/components/TextView/index.jsx?t=1678354528314:18:3)
    at Header
    at App
printWarning	            @	react-dom.development.js:86
error	                    @	react-dom.development.js:60
createElement	            @	react-dom.development.js:9816
createInstance	            @	react-dom.development.js:10941
completeWork	            @	react-dom.development.js:22187
completeUnitOfWork	        @	react-dom.development.js:26596
performUnitOfWork	        @	react-dom.development.js:26568
workLoopSync	            @	react-dom.development.js:26466
renderRootSync	            @	react-dom.development.js:26434
performConcurrentWorkOnRoot	@	react-dom.development.js:25738
workLoop	                @	scheduler.development.js:266
flushWork	                @	scheduler.development.js:239
performWorkUntilDeadline	@	scheduler.development.js:533

Code

import styled from 'styled-components';
// import variablesBreakpoints from '../../helpers/variablesBreakpoints';

function TextView({ children, color, fontSize, fontWeight }) {
  const StyledText = styled.text`
    color: ${color};
    font-size: ${fontSize};
    font-weight: ${fontWeight};
  `;

  return <StyledText>{children}</StyledText>;
}

TextView.defaultProps = {
  color: '#fff',
  fontSize: '1em',
  fontWeight: 'normal',
};

export default TextView;

Note

1. I didn't convert with uppercase because it does automatically.
2. I done a research and I saw plugins about that.

While styled.text exists, it is supposed to be used only in SVG context.

If you want to use it somewhere else, as suggested by Undo in the question comment, use <p> or <span> tags instead (so respectively styled.p or styled.span).