React Router Dom not recognizing useHistory hook, how do I fix this?

import { Button } from "@chakra-ui/button";
import { FormControl, FormLabel } from "@chakra-ui/form-control";
import { Input, InputGroup, InputRightElement } from "@chakra-ui/input";
import { VStack } from "@chakra-ui/layout";
import { useToast } from "@chakra-ui/toast";
import axios from "axios";
import { useState } from "react";
import {useHistory}  from "react-router-dom";
const Signup = () => {
const [show, setShow] = useState(false);
const handleClick = () => setShow(!show);
const toast = useToast();
const history = useHistory();
const [name, setName] = useState();
const [email, setEmail] = useState();
const [confirmpassword, setConfirmpassword] = useState();
const [password, setPassword] = useState();
const [pic, setPic] = useState();
const [picLoading, setPicLoading] = useState(false);
const submitHandler = async () => {
setPicLoading(true);
if (!name || !email || !password || !confirmpassword) {
toast({
title: "Please Fill all the Feilds",
status: "warning",
duration: 5000,
isClosable: true,
position: "bottom",
});
setPicLoading(false);
return;
}
if (password !== confirmpassword) {
toast({
title: "Passwords Do Not Match",
status: "warning",
duration: 5000,
isClosable: true,
position: "bottom",
});
return;
}
console.log(name, email, password, pic);
try {
const config = {
headers: {
"Content-type": "application/json",
},
};
const { data } = await axios.post(
"/api/user",
{
name,
email,
password,
pic,
},
config
);
console.log(data);
toast({
title: "Registration Successful",
status: "success",
duration: 5000,
isClosable: true,
position: "bottom",
});
localStorage.setItem("userInfo", JSON.stringify(data));
setPicLoading(false);
history.push("/chats");
} catch (error) {
toast({
title: "Error Occured!",
description: error.response.data.message,
status: "error",
duration: 5000,
isClosable: true,
position: "bottom",
});
setPicLoading(false);
}
};
const postDetails = (pics) => {
setPicLoading(true);
if (pics === undefined) {
toast({
title: "Please Select an Image!",
status: "warning",
duration: 5000,
isClosable: true,
position: "bottom",
});
return;
}
console.log(pics);
if (pics.type === "image/jpeg" || pics.type === "image/png") {
const data = new FormData();
data.append("file", pics);
data.append("upload_preset", "chat-app");
data.append("cloud_name", "piyushproj");
fetch("https://api.cloudinary.com/v1_1/piyushproj/image/upload", {
method: "post",
body: data,
})
.then((res) => res.json())
.then((data) => {
setPic(data.url.toString());
console.log(data.url.toString());
setPicLoading(false);
})
.catch((err) => {
console.log(err);
setPicLoading(false);
});
} else {
toast({
title: "Please Select an Image!",
status: "warning",
duration: 5000,
isClosable: true,
position: "bottom",
});
setPicLoading(false);
}
};
return (
<VStack spacing="5px">
<FormControl id="first-name" isRequired>
<FormLabel>Name</FormLabel>
<Input
placeholder="Enter Your Name"
onChange={(e) => setName(e.target.value)}
/>
</FormControl>
<FormControl id="email" isRequired>
<FormLabel>Email Address</FormLabel>
<Input
type="email"
placeholder="Enter Your Email Address"
onChange={(e) => setEmail(e.target.value)}
/>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Password</FormLabel>
<InputGroup size="md">
<Input
type={show ? "text" : "password"}
placeholder="Enter Password"
onChange={(e) => setPassword(e.target.value)}
/>
<InputRightElement width="4.5rem">
<Button h="1.75rem" size="sm" onClick={handleClick}>
{show ? "Hide" : "Show"}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<FormControl id="password" isRequired>
<FormLabel>Confirm Password</FormLabel>
<InputGroup size="md">
<Input
type={show ? "text" : "password"}
placeholder="Confirm password"
onChange={(e) => setConfirmpassword(e.target.value)}
/>
<InputRightElement width="4.5rem">
<Button h="1.75rem" size="sm" onClick={handleClick}>
{show ? "Hide" : "Show"}
</Button>
</InputRightElement>
</InputGroup>
</FormControl>
<FormControl id="pic">
<FormLabel>Upload your Picture</FormLabel>
<Input
type="file"
p={1.5}
accept="image/*"
onChange={(e) => postDetails(e.target.files[0])}
/>
</FormControl>
<Button
colorScheme="blue"
width="100%"
style={{ marginTop: 15 }}
onClick={submitHandler}
isLoading={picLoading}
>
Sign Up
</Button>
</VStack>
);
};
export default Signup;
[the error occured is in this image](https://i.stack.imgur.com/E1M0p.png)

in the above code there are syntactical errors and i have installed react-router-dom using command npm i react-router-dom and still i am receiving error like useHistory is not found .And if are import useHistory as import {useHistory} from 'react' it shows no erro in vs code conole but i am having error in browser console and unable to see my frontend only blank page is appearing after reload

i am expecting a login page with no errors and data to be transfered to my mongodb database

The usage of "useHistory" is deprecated. Instead, you can use "useNavigate" as follows:

import { useNavigate } from "react-router-dom";
const MyComponent = () => {
const navigate = useNavigate();
// Use navigate("/chats") to navigate to the "/chats" route
return (
// Your component's JSX
);
};