Estoy tratando de crear un componente de texto donde la primera palabra de la oración esté en negrita. En este momento, con mi solución, cuando un usuario ingresa "Consejos: vacaciones favoritas", obtengo " Consejos: vacaciones favoritas", donde el resto de la oración se vuelve desordenado y no se crea espacio después de Consejos:. Esta no es una solución elegante. Pensé en crear otro componente como TextBold y usarlo así < Text >< TextBold >Tips:< /TextBold > Your Vacation< /Text >, pero parece innecesario. ¿Hay alguna manera de hacer que esto funcione solo dentro del componente Texto?https://codesandbox.io/s/text-component-v2dbt?file=/src/App.tsx

 import * as React from "react"; export interface TextProps { children?: string; } export const Text: React.FunctionComponent<TextProps> = ({ children }: TextProps) => { return ( <> <span style={{ fontWeight: "bold" }}>{children?.split(" ")[0]}</span> <span>{children?.split(" ").slice(1)}</span> </> ); }; export default function App() { return ( <div> <Text>Tips: favourite vacation</Text> </div> ); }