Navigate from class component to functional component on button click in react js

I have a react js class component and wanted to navigate to a functional component and pass some data. I am facing issues in navigating. The structure is like this,

Class component:

export default class Dept extends Component {
     constructor(props) {};
     render() {
    return (
      <>
      <div className="container">
        <Button
                onClick={()=> {
                    //navigate from here to functional component and pass data
              }}
      </div>
     </>
    );
}

Functional Component:

export default function Office(props) {
//code
}

I am able to navigate from functional component to class component using "useNavigate" but not from class to functional since useNavigate is a hook. I have tried other ways like writing another functional component GoToOffice which has code to navigate to Office component. But using it inside Dept component on button click doesnt navigate to Office.This is the code I wrote:

function GoToOffice(props) {
  let navigate = useNavigate();
  navigate("./office", { replace: true });
};

//inside Dept component on button click
<Button onClick={() => {<GoToTemplateList/>}} Test button </Button>

Can anyone please let me know what is wrong? It would helpful if anyone suggests a way to navigate in this case.