我尝试将TypeScript添加到我的代码中，但我不断地遇到一个错误，我认为这与我的Props类型或其他东西有关。整个错误如下：

Type '({ volume, onload, isMuted, src, mediaType, ...config }: PropsWithChildren<Props>) => { howl: Howl | undefined; isMuted: boolean | undefined; volume: number; ready: boolean; pause: () => void; play: () => void; fade: (from: number, to: number, duration: number) => void; seek: () => number | undefined; duration: () =...' is not assignable to type 'FunctionComponent<Props>'.
Type '{ howl: Howl | undefined; isMuted: boolean | undefined; volume: number; ready: boolean; pause: () => void; play: () => void; fade: (from: number, to: number, duration: number) => void; seek: () => number | undefined; duration: () => number | undefined; }' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2322)

我正在创建我的Props类型，然后从泛型FunctionComponent中推断出我的函数的参数。我怀疑mapDispatchToProps可能是这里的问题所在。我的问题是我无法从错误消息中推断出问题所在。

import { useState, useEffect, useRef, FunctionComponent } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { Howl } from 'howler';

import { getSignedMediaURL } from '../../services/meditations';
import { SetHasConnectivity } from 'src/store/user/actions';

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({ SetHasConnectivity }, dispatch);

const noop = () => {};

type Props = {
    src: string | null;
    onload?: () => void;
    volume?: number;
    isMuted?: boolean;
    mediaType: 'soundscape' | 'meditation' | 'other';
    loop?: boolean;
    onend?: () => void;
    onstop?: () => void;
} & ReturnType<typeof mapDispatchToProps>;

const useMeditation: FunctionComponent<Props> = ({ volume = 1, onload = noop, isMuted, src, mediaType, ...config }) => {
    const player = useRef<Howl>();
    const soundId = useRef<number>();

    const [ready, setReady] = useState(false);

    const onSoundLoad = () => {
        if (player.current) {
            player.current.volume(volume);
            setReady(true);
            onload();
        }
    };

    useEffect(() => {
        if (src) {
            (async function () {
                let url = src;

                if (mediaType === 'soundscape' || mediaType === 'meditation') {
                    try {
                        const response = await getSignedMediaURL(src, mediaType);
                        url = response.body.url;
                    } catch (error) {
                        console.log('Test');
                    }
                }

                player.current = new Howl({
                    src: [url],
                    html5: true,
                    volume: 0,
                    onload: onSoundLoad,
                    ...config,
                });
            })();
        } else {
            setReady(true);
        }

        return () => {
            if (player.current) {
                player.current.stop();
            }
        };
    }, []); // eslint-disable-line

    useEffect(() => {
        if (player.current) {
            player.current.volume(volume);
        }
    }, [volume]);

    useEffect(() => {
        if (player.current) {
            if (isMuted) {
                player.current.mute(true, soundId.current);
            } else {
                player.current.mute(false);
            }
        }
    }, [isMuted]);

    const pause = () => {
        if (player.current) {
            player.current.pause();
        }
    };

    const play = () => {
        if (player.current) {
            soundId.current = player.current.play();
        }
    };

    const fade = (from: number, to: number, duration: number) => {
        if (player.current) {
            if (!player.current.playing()) {
                play();
            }

            player.current.fade(from, to, duration, soundId.current);
        }
    };

    const seek = () => {
        if (player.current) {
            return player.current.seek();
        }

        return;
    };

    const duration = () => {
        if (player.current) {
            return player.current.duration();
        }

        return;
    };

    return {
        howl: player.current,
        isMuted,
        volume,
        ready,

        pause,
        play,
        fade,

        seek,
        duration,
    };
}

export connect(null, mapDispatchToProps)(useMeditation);