Could not find a declaration file for module 'react-reveal/Fade' - reactjs

Question

I want to use react-reveal package in my react project. I installed it. But react can not find module
Could not find a declaration file for module 'react-reveal/Fade'.
But react-reveal shows in package.json file and node module.
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^4.6.0",
"jquery": "^3.6.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-parallax": "^3.3.0",
"react-reveal": "^1.2.2",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-scroll": "^1.8.2",
"react-water-wave": "^1.0.5",
"web-vitals": "^1.1.2"
},
I tried to install npm i --save-dev #types/react-reveal.
Then this error comes
'#types/react-reveal#latest' is not in the npm registry.
How can I solve this?
Note: I am not using typescript

Answer 1

Use require to import the package
import "./Product.scss"
//use require to import the module
const Fade = require("react-reveal/Fade")
export interface IProduct {
price: number
title: string
img: string
}
const Product: React.FC<IProduct> = ({ price, title, img }) => {
return (
<Fade bottom cascade>
<li className="product-wrapper">
<div className="product-container">
<img src={`${img}`} alt="" />
<div className="main-details">
<div className="title">{title}</div>
<div className="details">
<div className="price">Price: $ {price}</div>
<div className="button-wrapper">
<button className="button btn-primary">
Add to cart
</button>
</div>
</div>
</div>
</div>
</li>
</Fade>
)
}
export default Product
Tried this implementation and it worked

Answer 2

Run this commands without typescript
nom install react-reveal
npm install react-reveal/Fade --save
OR
import { Fade } from 'react-reveal';