Error while using next/image with MDX content - `validateDOMNesting`

Question

I'm creating a Next.js blog using mdx-bundler and styled-components. I'm using remark-mdx-images to import images into JSX. I created a custom component (styled.div) to embed the next/image in it.

But when I run the blog in browser, i'm receiving an error saying that validateDOMNesting(...): <div> cannot appear as a descendant of <p>. I tried switching this to styled.span, but its doesn't display the image at all even though its rendered in DOM

I'm also receiving another warning: Expected server HTML to contain a matching <div> in <p>.

Below is the code that I have

import Image from 'next/image';

const CustomImage = styled.div` // cannot change this to styled.span
    position: relative;
    aspect-ratio: 16/9;

    & .image{
    width: 100% !important;
    height: unset !important;
    min-height: unset !important;
    min-width: unset !important;
    }

`

const MDXImage = (props) => {

    return (
        <CustomImage>
            <Image className='image' src={props.src} alt={props.alt} layout="fill" objectFit="contain" />
        </CustomImage>
    )
}

below is the complete error:

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19811)
    at MDXImage (webpack-internal:///./pages/blog/[slug].js:52:19)
    at p
    at p
    at main
    at div
    at Post (webpack-internal:///./pages/blog/[slug].js:138:19)
    at MyApp (webpack-internal:///./pages/_app.js:24:24)
    at StyleRegistry (webpack-internal:///./node_modules/styled-jsx/dist/stylesheet-registry.js:231:34)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:90:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:265:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:769:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:914:26)