I don’t understand how to set global configuration for message output in React app with the help of ant-design

I want to use the message component from antd: https://ant.design/components/message#message-demo-custom-style

But I don’t quite like to create such a structure in every application as shown in the demo. After a bit of searching on the internet I found out that it is possible to use this way in main.jsx:

import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import './index.css'

import { App as AntdApp } from 'antd';

createRoot(document.getElementById('root')).render(
    <AntdApp>
        <App />
    </AntdApp>
)

And call it in the required component:

import { App as AntdApp } from 'antd';

And setup:

const { message } = AntdApp.useApp();

And then use:

message.error('your message')

And all this works, but I would like to change globally the styles to display different messages. But I don’t quite understand how to do it, I know about ConfigProvider but from the documentation I don’t understand how to interact with it.