I'm using react-router-dom v6.0.0-beta.0 with reac-redux 7.2.2 and want to edit the state value by using the useState hook, but when I click on EditIcon it gives me this error...

(0 , _reactRouterDom.useHistory) is not a function

EditTodo.js

import React, { useState } from "react";

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

import { useHistory } from "react-router-dom";

import { useParams } from "react-router-dom";



import { todoUpdated } from "./TodoSlice";



export const EditTodo = () => {

  const { todoId } = useParams();



  const todo = useSelector((state) =>

    state.todo.find((todo) => todo.id === todoId)

  );



  const [name, setName] = useState();

  const [description, setDescription] = useState();



  const dispatch = useDispatch();

  const history = useHistory();



  const onTitleChanged = (e) => setName(e.target.value);

  const onContentChanged = (e) => setDescription(e.target.value);



  const onSavePostClicked = () => {

    if (name && description) {

      dispatch(todoUpdated({ id: todoId, name, description }));

      history.push(`/todo/${todoId}`);

    }

  };



  return todo ? (

    <section>

      <h2>Edit Post</h2>

      <form>

        <label htmlFor="postTitle">Post Title:</label>

        <input

          type="text"

          id="postTitle"

          name="postTitle"

          placeholder="What's on your mind?"

          value={name}

          onChange={onTitleChanged}

        />

        <label htmlFor="postContent">Content:</label>

        <textarea

          id="postContent"

          name="postContent"

          value={description}

          onChange={onContentChanged}

        />

      </form>

      <button type="button" onClick={onSavePostClicked}>

        Save Post

      </button>

    </section>

  ) : null;

};

How to fix this issue? if someone knows help me to solve this. thanks
here is the codesandbox