Typescript error with UploadDropZone, asUploadButton, and React.forwardRef without styled components

[angelahnicole]

Hello! I'm using the code snippet from https://codesandbox.io/s/react-uploady-dnd-with-asuploadbutton-jk9bg, but I'm not using styled components (and instead am using CSS modules), and I'm getting the following error message in VSCode:

Type '{ children: Element; ref: ForwardedRef<unknown>; className: string; onDragOverClassName: string; extraProps: { onClick: (e: MouseEvent<Element, MouseEvent>) => void; }; ... 20 more ...; isSuccessfulCall?: IsSuccessfulCall | undefined; }' is not assignable to type 'IntrinsicAttributes & UploadDropZoneProps'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & UploadDropZoneProps'.

And my code:

import styles from "./styles.module.css";
import UploadDropZone from "@rpldy/upload-drop-zone";
import { asUploadButton, UploadButtonProps } from "@rpldy/upload-button";
import React from "react";

const ClickableDropZone = React.forwardRef((props: UploadButtonProps, ref) => {
    const { onClick, ...buttonProps } = props;

    const onZoneClick = React.useCallback(
        (e: React.MouseEvent) => {
            if (onClick) {
                onClick(e);
            }
        },
        [onClick]
    );

    return (
        <UploadDropZone
            {...buttonProps}
            {/*Error shows on the next line below... I'm guessing it has something to do with not using styled-components*/}
            ref={ref}
            className=styles["uploadDropZone"]}
            onDragOverClassName={styles["active"]}
            extraProps={{ onClick: onZoneClick }}
        >
            <span>Drop File or click here...</span>
        </UploadDropZone>
    );
});

const DropZoneButton = asUploadButton(ClickableDropZone);

export default DropZoneButton;

I'll note that code builds and works, but the error showing up in my IDE is a little annoying and makes me think that maybe I'm doing something wrong.