Cuando la propiedad requerida es verdadera, quiero que * al final de los niños sea de color rojo. El código actual a continuación está imprimiendo 'Componente de etiqueta*'. Antes del cambio, lo tenía {requerido? `${niños} * : niños} y funcionó excepto que * era el color negro predeterminado. Todo lo que estoy tratando de hacer es convertirlo en rojo * y enfrentar dificultades. ¿Qué estoy haciendo mal? https://codesandbox.io/s/label-component-ts-zw392?file=/src/App.tsx:0-1356

 import * as React from "react"; export interface ILabelProps { weight?: "normal" | "bold"; htmlFor?: string; children?: React.ReactNode; testId?: string; required?: boolean; } export const Label: React.FunctionComponent<ILabelProps> = ({ htmlFor, weight = "normal", testId, required = false, children }: ILabelProps) => { const dataRef = React.useRef(null); const createTestId = ( ref: HTMLElement, testId: string | undefined, testIdName: string = "data-testid" ) => { if (ref && testId) { ref.setAttribute(testIdName, testId); } }; React.useEffect(() => { if (dataRef.current) { createTestId(dataRef.current, testId); } }, [dataRef, testId]); const requiredAsterisk = `<span color="red">*</span>`; return ( <label ref={dataRef} htmlFor={htmlFor} style={{ fontWeight: weight }}> {required ? ( <span> {children} {requiredAsterisk} </span> ) : ( children )} </label> ); }; export const Content: React.FunctionComponent = () => { return ( <div> <input type="text"></input> </div> ); }; export default function App() { return ( <Label htmlFor="some-id" testId="testing-label" weight="normal" required={true} > Label Component </Label> ); }