I am using react-file-viewer-plus (https://www.npmjs.com/package/react-file-viewer-plus) in a typescript project. But I want to change a few things. So I extended FileViewer, which is a jsx file. When I try to use it, i get two errors. If I replace<ExtendedFileViewer with <FileViewer, the class that I am trying to extend, it all works.

• JSX element class does not support attributes because it does not have a 'props' property.ts(2607).
• 'ExtendedFileViewer' cannot be used as a JSX component. Its instance type 'ExtendedFileViewer' is not a valid JSX element. Type 'ExtendedFileViewer' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2786)

class ExtendedFileViewer extends FileViewer {
    constructor(props) {
        super(props);
    }

    render() {
        const Driver = this.getDriver(this.props);
        return (
            <div className="pg-viewer-wrapper">
                <div className="pg-viewer" id="pg-viewer">
                    <Driver {...this.props} width={this.state.width} height={this.state.height} />
                </div>
            </div>
        );
    }
}

export default ExtendedFileViewer;


export const GeneralFileViewer = (props: {
    file: Image;
    errorViewingFile: (file: Image) => void;
}) => {
    const fileType = props.file.key.split(`.`)[1].toLowerCase();
    const fileData = props.file.file;

    const onError = (error: Error) => {
        props.errorViewingFile(props.file);
    };

    return (
        <ExtendedFileViewer
            fileType={fileType}
            filePath={fileData === undefined ? props.file.fileURL : URL.createObjectURL(fileData)}
            onError={onError}
        />
    );
};```



  [react-file-viewer-plus]: https://www.npmjs.com/package/react-file-viewer-plus