multiple query-string in react router v6

I want to use two query strings in my URL
when it has both filter=done and search=something
I want to show in URL localhost3000/?filter=done&search=something
but it overwrites one of them and shows only one.
I use HOC to pass the location and navigate to my class component.
this is my code:

class TodoList extends Component {
  constructor(props) {
    super(props);
    const { filter } = queryString.parse(this.props.location.search, {
      ignoreQueryPrefix: true,
    });
    const { search } = queryString.parse(this.props.location.search, {
      ignoreQueryPrefix: true,
    });
    this.searchParams = {
      filter: filter || "all",
      search,
    };
    this.state = {
      todolist: [],
      addtodo: "",
      searchterm: "",
      searchtodolist: [],
      filter: "",
    };
  }

when I click to filter the list, this function is calls

 handleFilter = (value) => {
        this.setState(
          {
            filter: value,
          },
          () => this.replaceUrlFilter()
        );
      };

  replaceUrlFilter = () => {
        this.props.navigate(
          this.state.filter === "all" ? "/" : `?filter=${this.state.filter}`
        );
      };

when I search something in search input, this function is calls

handleSearch = (event) => {
    this.setState(
      {
        searchterm: event.target.value,
      },
      () => this.replaceUrlSearch()
    );
  };

 replaceUrlSearch = () => {
    this.props.navigate(
      this.state.searchterm === "" ? "" : `?search=${this.state.searchterm}`
    );
  };