Object literal may only specify known properties, and 'className' does not exist in type

Question

I am trying to convert an image component wrapper of Next.js but I am having an error below

Type '{ placeholder: "blur"; blurDataURL: string; onLoadingComplete: () => void; className: string; key?: React.Key | null | undefined; crossOrigin?: "" | "anonymous" | "use-credentials" | undefined; ... 269 more ...; alt: string | undefined; }' is not assignable to type '{ key?: React.Key | null | undefined; crossOrigin?: "" | "anonymous" | "use-credentials" | undefined; decoding?: "async" | "auto" | "sync" | undefined; referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined; ... 270 more ...; alt: string | undefined; }'.
  Object literal may only specify known properties, and 'className' does not exist in type '{ key?: Key | null | undefined; crossOrigin?: "" | "anonymous" | "use-credentials" | undefined; decoding?: "async" | "auto" | "sync" | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; ... 270 more ...; alt: string | undefined; }'.

Image.tsx

import Img from 'next/future/image';

import { GbImagePlaceholder } from '../icons';
import isEmpty from 'lodash/isEmpty';
import imageDataBlurUrl from '../../utils/image';
import cx from 'classnames';
import { useState } from 'react';
import React from 'react';
import { ImageProps } from 'next/image';

export interface FutureImageProps extends ImageProps {
    showDefault?: Boolean;
    blur?: Boolean;
    className: string;
}

const FutureImage = (props: FutureImageProps) => {
    const {
        width,
        height,
        src,
        showDefault = true,
        blur = true,
        className,
        alt,
        ...rest
    } = props;
    const [isLoading, setLoading] = useState(true);

    if (isEmpty(src) && showDefault) {
        return <GbImagePlaceholder width="100%" height="100%" />;
    }

    let attributes = {
        src: src,
        width: width,
        height: height,
        alt,
        ...rest,
    };

    if (blur) {
        attributes = {
            ...attributes,
            placeholder: 'blur',
            blurDataURL: imageDataBlurUrl(10, 10),
            onLoadingComplete: () => setLoading(false),
            className: cx(
                className,
                'duration-700 ease-in-out',
                isLoading
                    ? 'grayscale blur-3xl scale-110'
                    : 'grayscale-0 blur-0 scale-100'
            ),
        };
    }
    return <Img {...attributes} />;
};

export default FutureImage;

To be honest, I don't know how to fix the error with classname and Img error and I need help to fix the error. Please see image below