How can I add parentheses and wrap html attribute in single return line component?

Input:

export default function ModalDefault({ children }: props) {
    return (
        <div className={'fixed top-72 w-[100px] bg-blue-300/70 h-20'}>
            {children}
        </div>
    );
}

Output:

export default function ModalDefault({ children }: props) {
    return <div className={'fixed top-72 w-[100px] bg-blue-300/70 h-20'}>{children}</div>;
}

Expected output:

export default function ModalDefault({ children }: props) {
    return (
        <div 
            className={'fixed top-72 w-[100px] bg-blue-300/70 h-20'}
        >
            {children}
        </div>
    );
}

Why?

I want to add parentheses automatically and auto wrap every single attributes, but in single html return component, isn't working :,<

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 4,
  "trailingComma": "all",
  "printWidth": 200,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "singleAttributePerLine": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

this is my prettierrc file

how can i solve it?

Reproduce the TSX input in the Prettier playground with the supplied options, especially printWidth 200 and singleAttributePerLine. Compare the actual and expected output, then determine whether the request needs a formatter behavior change or documentation; done means the intended behavior is decided and verified against the example.