What is the correct way to work with useDispatch/useSelector in React(Next) with TypeScript?

Question

typescript

I use Next TypeScipt, the mechanism itself works, but when building the application, the error ""Module '"react-redux"' has no exported member 'useDispatch'.ts(2305)"?"

import * as React from 'react'
import * as css from '../Projects.css'
import { getProject } from "../../../store/actions/projects";
import Loader from "../../share/Loader/Loader.jsx";

import {useDispatch, useSelector} from "react-redux";
import { Dispatch } from "redux";


export const Project = () => {


    const [timeoutFlag, setFlagTimeout] = React.useState(false)

    
    const dispatch = useDispatch();

    const item = useSelector(state => state.projects['item']);
    



    
    

    React.useEffect(() => {

        if (typeof window === 'undefined') { console.log('Window is not there') } else{
          let id = window.location.pathname.split('/').pop()
          dispatch(getProject(id));
        } 

        setTimeout(function () {
            $('#overlay').animate({ opacity: 0 }, 1000);
            setTimeout(function () {
                setFlagTimeout(true)
            }, 1000)
        }, 1000)
    }, []);

    if (item == null || timeoutFlag == false) {
        return (
            <Loader />
        )
    }
    return (

                        <div 
                        className={css.projectsDetail}
        >
            <img className={css.detailImg} src={`http://api.************.ru/${item['fullimg']}`} />
            <h1>
                <a 
        href={item.url}
      >
        { item.name }
      </a>
    </h1>   
  </div >)
  
    


  }

 

export default Project;