Text inside a border in a ReactPDF view

I want to archieve something like this:

using ReactPDF, since this is going to go inside a PDF document.

Currently, my code looks like this:

import React from 'react';
import { View } from '@react-pdf/renderer';
import { BoldText } from '../../texts';

export function PerceptionRow() {
    return (
        <View style={{ borderWidth: 3, borderColor: '#f4ccff', borderRadius: 15 }} break={true}>
            <BoldText style={{ marginBottom: 4, alignSelf: 'center' }}>AAA</BoldText>
        </View>
    );
}

Understandably, this places my title inside the square, unlike what am I trying to archieve. How can I do it then?

You can also use fieldset and legend in reactjs

In short,
Replace these

<View style={{ borderWidth: 3, borderColor: '#f4ccff', borderRadius: 15 }} break={true}>
  <BoldText style={{ marginBottom: 4, alignSelf: 'center' }}>AAA</BoldText>
</View>

To

<fieldset style={{ borderWidth: 3, borderColor: '#f4ccff', borderRadius: 15 }} break={true}>
  <legend style={{ marginBottom: 4, alignSelf: 'center' }}>AAA</legend>
</fieldset>