React Attempted import error: 'withRouter' is not exported from 'react-router-dom'

При обновлении зависимостей в package.json

  "react-router": "^6.4.3",
  "react-router-dom": "^6.4.3",

проект где использовался старый синтаксис превратился в тыкву.

Вот здесь нашел решение. Но не могу понять, как его применить к своему проекту.

import React, {useState} from 'react';
import {NavLink} from 'react-router-dom';
import Button from "../../Components/Button";


import TournamentItem from "./../../Main/HomePage/SliderSection/SimpleSlider/TournamentItem/TournamentItem"
import "./singleTournamentPage.scss"
import "./../../Components/seo.scss"
import './modalTournament.scss'


import coinIcon from "./../../Components/images/coin.svg"
import moneyIcon from "./../../Components/images/icon-money.png"


import parse from 'html-react-parser'
import PrizeFund from "./PrizeFund/PrizeFund";


///////////// TODO DATA from server
import usersInCurrentTournament from "./../../../data/usersInCurrentTournament"
//import {withRouter} from "react-router";
import {
    useLocation,
    useNavigate,
    useParams
} from "react-router-dom";

function withRouter(Component) {
    function ComponentWithRouterProp(props) {
        let location = useLocation();
        let navigate = useNavigate();
        let params = useParams();
        return (
            <Component
                {...props}
                router={{ location, navigate, params }}
            />
        );
    }

    return ComponentWithRouterProp;
}


import TableRank from "../../Components/TableRank";





const SingleTournamentPage = withRouter((props) => {

    const {
        tournaments,
        tournamentsActive,
        ranks,
        tournamentsValues,
        userId,
        userRank,
        enterTournament,
        removeUserFromTournament,
        isUserRegistered
    } = props;




    const [modalStatus, setModalStatus] = useState(false);


    // const modalTournamentStatus = true;


    const currentTournamentUrl = props.match.params.tournamentUrl;
    const currentTournamentIndex = tournaments.findIndex((tournament) => tournament.tournamentUrl === currentTournamentUrl);


    const currentTournament = tournaments[currentTournamentIndex];
    const tournamentStatus = currentTournament.tournamentStatus;
    const currentTournamentId = currentTournament.id;


    // console.log(currentTournamentId, "= currentTournamentId");

    let currentTournamentIndexForPlayer = tournamentsActive.indexOf(currentTournamentId);

    // console.log(currentTournamentIndexForPlayer, "= currentTournamentIndexForPlayer");


    const tournamentRules = currentTournament.tournamentRules;
    const currentMoneyPosition = currentTournament.tournament_money_position;
    const Prize_fund = currentTournament.Prize_fund;


    function setEnterTournament() {
        /// TODO AJAX запрос который обновит базу если Ок то обновляем состояние
        enterTournament(currentTournamentId);
    }

    function leftTournament() {
        /// TODO AJAX запрос который обновит базу если Ок то обновляем состояние
        removeUserFromTournament(currentTournamentIndexForPlayer);
        setModalStatus(!modalStatus);
    }

    function ButtonTournament() {


        if (!isUserRegistered) {
            return <NavLink className="btn btn_enterIntoTournament" to={"/registration/"}>Принять участие</NavLink>;
        }


        if (tournamentStatus) {

            if ((tournamentsActive.length !== 0) && (!tournamentsActive.includes(currentTournamentId))) {
                return <div className="choseOtherTournament_block">
                    <p className="btn btn_choseOtherTournament">Вы участвуете в другом турнире</p>
                    <p className="text_choseOtherT__text">Чтобы участвовать, дождитесь завершения или отмените участие в
                        турнире</p>
                </div>;
            } else if (tournamentsActive.includes(currentTournamentId)) {
                return <Button className="btn btn_leftTournament" onClick={() => setModalStatus(!modalStatus)}>Покинуть турнир</Button>;
            } else {
                return <Button className="btn btn_enterIntoTournament" onClick={setEnterTournament}>Принять
                    участие</Button>;
            }
        } else {
            return null
        }

    }

    /// TODO Как Получить выборку только тех игроков 10 которые участвуют в текущем турнире (+ отфильтровать на сервере 10 лучших tournamentsValues: currentTournamentId ) и сформировать таблицу ?
    //// Что будет если участников в турнире < 10 ?
   // const currentTournamentPlayers = usersInCurrentTournament;


    //// TODO Делать ли ещё один запрок от ID пользователя что б узнать его позицию в текущем турнире ?
    //// При завершении турнира tournamentStatus - false /// На сервере фишки превращаются в гривны .


    return (
        <section className="single_tournament">
            <TournamentItem
                tournamentsActive={tournamentsActive}
                singleTournamentMarker={true}
                tournamentName={currentTournament.tournamentName}


                Prize_fund={Prize_fund}

                tournamentStatus={tournamentStatus}
                tournamentId={currentTournamentId}
                tournament_start={currentTournament.tournament_start}
                tournament_end={currentTournament.tournament_end}
                tournamentRules={currentTournament.tournamentRules}
                tournamentImgUrl={currentTournament.tournamentImgUrl}
                tournamentImgUrl_min={currentTournament.tournamentImgUrl_min}
            />


            <div className="bl_seo">
                <h1>{currentTournament.tournamentName}</h1>
                {parse(currentTournament.tournamentDescription)}
            </div>
            <PrizeFund Prize_fund={Prize_fund} currentMoneyPosition={currentMoneyPosition} moneyIcon={moneyIcon}/>

            <ButtonTournament/>

            {(modalStatus) ? <div className="ShadowBlock">
                <div className="modal_tournament"><p className="modal_tournament__top">Вы уверены, что хотите прекратить
                    участие в турнире</p><p className="modal_tournament__title">{currentTournament.tournamentName}?</p>
                    <p className="modal_tournament__text">“Ваши достижения будут анулированы”</p>
                    <div className="modal_tournament__buttons">
                     <Button className="btn_tournament" onClick={leftTournament}><span>да</span></Button>
                    <Button className="btn_tournament" onClick={() => setModalStatus(!modalStatus)} >нет</Button></div>
                </div>
            </div> : null}


            <div className="tournament_rules bg-block">
                <p className="tournament_rules__text">Правила получение выигрыша в турнире</p>
                <div className="tournament_rules__list">{parse(tournamentRules)}</div>
            </div>

            <div className="table_t">
                <p className="table_t__title">Таблица лидеров турнира</p>



                {/*/// TODO Тут AJAX забирающий данные об пользователе  */}
                {/* userRatingPlace тоже надо получить из серера */}

                <TableRank

                    showFullTableRating={false}

                    ranks={ranks}
                    userId={userId}
                    userRank={userRank}


                    userRatingPlace={44}


                    tournamentsValues={tournamentsValues}
                    tournamentStatus={tournamentStatus}
                    currentTournamentId={currentTournamentId}


                    playersForMakingTable = {usersInCurrentTournament}
                    tournamentsActive={tournamentsActive}
                />


            </div>


        </section>
    )
});

export default SingleTournamentPage

Подскажите, пожалуйста, как следует заменить код, что б оно продолжело работать ? *моих навыков не достаточно.