[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry

Atlassian Ecosystem Design
1

I have my own <IntlProvider> in the root of my application but when I am using the ReactRenderer component to render the ADF format description in my application I am getting this error.

import { ReactRenderer } from "@atlaskit/renderer";

function CustomAdfParagraph(props) {
  const theme = useTheme();
  return (
    <div style={{ color: theme.customColors.grey[500], fontSize: "12px" }}>
      {props.children}
    </div>
  );
}

<ReactRenderer
    document={description}
    nodeComponents={{
      paragraph: CustomAdfParagraph,
    }}
 />

Is there any way to get rid of this error otherwise if any alternative should I follow ?