Problem with linebreak

[NathanNeves]

I Have been trying to fix that in my code but for some reason the prochat component is not rendering the line breaks

Here is my backend code as well:

messages.pop()
let systemTemplate = ChatPromptTemplate.fromMessages([
    ['system', "Você é um assistente chamado cortex sua principal função é responder os usuários com base apenas nas informações abaixo: \n {information} "],
    ...messages,
    ['user', "{text}"],
]);

let systemMessage = await systemTemplate.invoke({
    information: data[0].raw_value,
    text: lastMessage.content
});

const completion = await chat.invoke(systemMessage);

return NextResponse.json(completion.content);

Here is my proChat component in the frontend:

{showComponent && (
        <ProChat
          displayMode={"docs"}
          style={{
            height: "85vh",
            color: theme.colorText,
          }}
          
          locale="en-US"  
          actions={{
            render(defaultDoms) {
              return [
                ...defaultDoms,
                <Button key="custom" >
                  Generate Notes
                </Button>,
              ];
            },
       
          }}
          helloMessage={"Hello! How can I help you today?"}
          placeholder="Digite aqui..."
          request={'/api/processChat'}
          config={{params:{
            conversationId:record?.id,

          }}}
        />

[NathanNeves]

Already discovered how to solve it just for anyone with the same doubt and does not speak chinese you can solve that using the line below:

request={async (messages) => {
            let response = await axios.post('/api/processChat',{messages,conversationId:record?.id},{withCredentials:true});
            return new Response(response.data);
          }}