React - Tooltip Return New Line Using String Concatenation

Question

I'm trying to figure out how I can make a Tooltip title appear on multiple lines using the correct string concatenation.

This is what it looks like now:

First Name: John Last Name: Doe

This is what I'm trying for the Tooltip:

First Name: John
Last Name: Doe

I'm using Material UI/Styled Components.

I've already tried styling the Tooltip with 'whitespace' and multiline={true} and tried 
 and '\n' but it did not work. I think it's a particular case so I'm not sure on how to do this.

Any help is greatly appreciated!! Thank you

<StyledToolbar>
        <StyledButtonsContainer>
                <IconButton>
                    <Tooltip title={`First Name: ${firstname}` + '\n' + `Last Name:${lastname} `}>
                        <AccountCircleIcon />
                    </Tooltip>
                </IconButton>
        </StyledButtonsContainer>
</StyledToolbar>

Answer 1

Try this:

<Tooltip title={<>First Name: {firstname}<br/>Last Name: {lastname}</>}>
  <AccountCircleIcon />
</Tooltip>