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