there are conflict between react-awesome-query-builder and MUI v5

react-awesome-query-builder made on material v4 and it makes style conflicts with MUI v5 and I am using MUI v5 and when I remove MaterialConfig everything works very well.

thank you in advance.

how can I use react-awesome-query-builder with MUI v5?

import React, { useState } from "react";
import { Query, Builder, Utils as QbUtils } from "react-awesome-query-builder";
import MaterialConfig from "react-awesome-query-builder/lib/config/material";
import "react-awesome-query-builder/lib/css/styles.css";
import "react-awesome-query-builder/lib/css/compact_styles.css";
import PublicTitle from "publicComponent/publicTitle";
import {Box} from "@mui/material"; //optional, for more compact styles

const InitialConfig = MaterialConfig; // or MaterialConfig or BasicConfig



// You can load query value from your backend storage (for saving see `Query.onChange()`)
const queryValue = { id: QbUtils.uuid(), type: "group" };

 const QueryBuild = () => {
    const [state, setState] = useState({
        tree: QbUtils.checkTree(QbUtils.loadTree(queryValue), config),
        config: config
    });

  
    return (
        <div>
            <PublicTitle title="Query Building"/>
            <div className="query-builder-result mb-3 mt-4">

            <Box className="group group-or-rule p-3">
                <p>
                    Result:
                </p>

                <pre style={{fontSize:"1rem"}}>
            {JSON.stringify(QbUtils.queryString(state.tree, state.config))}
          </pre>
            </Box>

        </div>
            <Query
                {...config}
                value={state.tree}
                onChange={onChange}
                renderBuilder={renderBuilder}
                style={{padding: "0"}}
            />

        </div>
    );
};
export default QueryBuild;