styled-components-breakpoint webpack error in NextJS

[arthurpeck]

Hi,
After sucessfully used the styled-components-breakpoint in React in the past, I wanted to add styled-components-breakpoint to my components in NextJS.
When I use it, it throws an webpack error:

TypeError: styled_components_breakpoint__WEBPACK_IMPORTED_MODULE_4___default(...) is not a function

Component:

import breakpoint from 'styled-components-breakpoint';

const Logo = styled.img`
    display: block;

    ${breakpoint('mobile')`
        width: 100%;
    `}

    ${breakpoint('tablet')`
        width: 60%;
    `}

    ${breakpoint('desktop')`
        width: 30%;
    `}
`;

next.config.js:

// next.config.js
const withOptimizedImages = require('next-optimized-images');
const path = require('path');
module.exports = withOptimizedImages({
  webpack(config) {
    config.resolve.alias.images = path.join(__dirname, 'public/images');
    return config;
  },
});

Why is it throwing an error? I can use styled-components perfectly without breakpoints and webpack compiles...