React-datocms blured image not filling the container like the final image

I am using Image component of react-datocms package. What I notices is that the blured image is not filling the container like the final image… The result is not great as you get sharp edges…

Blurred image

Final image

Is there a way to fix this?

Hello @primoz.rome

Can you send us the snippet of the usage of the component as well as all of the classes/styles applied to it so we can take a closer look?
Thank you!

Here is my code how I use it in above case scenario… We use Chakra UI for the UI library…

<Box as="section" bg="bg-surface" h={{ base: 'calc(100vh - 96px)' }}>
  <Box position="relative" h="full">
    <Container
      py={{ base: '16', md: '24' }}
      height="full"
      maxW="container.2xl"
    >
      <Stack
        direction={{
          base: 'column',
          lg: 'row',
        }}
        spacing={{base: '16'}}
        align={{lg: 'center'}}
        height="full"
      >
        <Stack
          spacing={8}
        >
          <Prose
            as="div"
            w="xl"
            sx={{
              h1: {
                color: 'blackAlpha.800',
                fontSize: '6xl',
                fontWeight: 'black',
                lineHeight: '1.3em',
                mb: 8,
              },
              mark: {
                bg: 'dsorange.500',
                color: 'white',
                px: 3
              },
            }}
          >
            <StructuredText data={subtitle} />
          </Prose>
          <Stack
            direction={{ base: 'column', md: 'row' }}
            spacing="3"
          >
            <Button colorScheme="dsorange" size="lg">
              Get a quote
            </Button>
            <Button size="lg">
              Book 1:1 demo
            </Button>
          </Stack>
        </Stack>
        <Box
          pos={{ lg: 'absolute' }}
          w={{ base: 'full', lg: '50%' }}
          height={{ base: '96', lg: 'full' }}
          sx={{
            clipPath: {
              lg: 'polygon(7% 0%, 100% 0%, 100% 100%, 0% 100%)',
            },
          }}
          right="0"
          bottom="0"
          bg="dsblack.800"
        >
          <DatoImage
            layout="fill"
            objectFit="cover"
            objectPosition="50% 50%"
            data={cover.responsiveImage}
          />
        </Box>
      </Stack>
    </Container>
  </Box>
</Box>