I am new to using Material UI with ReactJs, TypeScript and trying to reduce the font size of typography when its text gets too large (3 or more lines) Here is my code snippet:-

     const x =() => {
    
    if(text.length > 12 )
        return "body1";
    else 
        return "subtitle2";
  };

  const renderTitle = () => {
    return (
      <Typography variant= {x} textAlign="center" lineHeight={1.2}>
        {text}
      </Typography>
    );
  };

But its given error like

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

is there any way to change variant="body1" when the text comes in 3rd line? Please help me