how to migrate from history.push to navigate

Question

im migrating to react router 6 and not quite sure how to refactor the line below, history.push, replacing history.push with Navigate, didnt work either

const renderHistoryTable = () => {
    const { history } = props;
    return (
      <table>
        <thead>
          <tr className="history_header_row">
            <GlobalStyles />
            <th className="history_header">Status</th>
            <th className="history_header">Details</th>
          </tr>
        </thead>
        <tbody>
          {historyData.tests.map((test, index) => (
            <tr key={index}>
              <td>{getMappedTestName(test.name)}</td>

              <td>{formatDate(test.date)}</td>
              <td className="status_wrapper">
                <span className={`circle failed ${test.status}`} />{' '}
                <span className="status">{test.status}</span>
              </td>
              <td>
                <span className="clickable" onClick={() => history.push(`/tests/${test.reportUrl}`)}>
                  View details
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  };