Soy nuevo en el uso de Material UI con ReactJs, TypeScript y trato de reducir el tamaño de fuente de la tipografía cuando su texto es demasiado grande (3 o más líneas). Aquí está mi fragmento de código:

 const x =() => { if(text.length > 12 ) return "body1"; else return "subtitle2"; }; const renderTitle = () => { return ( <Typography variant= {x} textAlign="center" lineHeight={1.2}> {text} </Typography> ); };

Pero su error dado como

 Type '() => "subtitle2" | "body1"' is not assignable to type '"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined'.

¿Hay alguna forma de cambiar variant="body1" cuando el texto aparece en la tercera línea? por favor, ayúdame