Error with no message for React useNavigate()

I’m creating a project with React/Django, both of which I am very new to. Currently, I am trying to have the a button on the home page redirect to another page, which is generated on click. When I load the home page, even before I push the button, I get an error with useNavigate(). There is no message with the error. Here is my code in HomePage.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, Redirect,useParams,useNavigate} from 'react-router-dom';
import RoomPage from "./RoomPage";
import ResultsPage from "./ResultsPage";
import { Button, Grid, Typography, TextField, FormControl, FormHelperText, Radio, RadioGroup, FormControlLabel } from '@material-ui/core';

const HomePage = () => {

    try{
        const navigate = useNavigate();
    } catch(error){
        console.log(error);
    }
    const handleRoomButtonPressed=async()=>{
        
        const requestOptions = {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                //votes_to_skip: this.state.votesToSkip,
                //guest_can_pause: this.state.guestCanPause,
              }),
        };
        fetch("/api/create-room",requestOptions)
            .then((response) => response.json())
            .then((data)=>navigate("/room/" + data.code));

    }

    return (
            <Router>
                <Routes>
                    <Route path="/room/:code" element = {<RoomPage/>}/>
                    <Route path="/results/:code" element = {<ResultsPage/>}/>
                    <Route path="/" element = {
                        <Grid container spacing = {1}>
                            
                            <Grid item xs={12} align = "center">
                                <Typography component="h4" variant="h4">
                                    Project Name
                                </Typography>
                            </Grid>
                            
                            <Grid item xs={12} align = "center">
                                <FormControl component = "fieldset">
                                    <FormHelperText>
                                        <div align = "center">
                                            Push the button to create a new room.
                                        </div>
                                    </FormHelperText>
                                </FormControl>
                            </Grid>

                            <Grid item xs={12} align = "center">
                                <Button color = "primary" variant = "contained" onClick={handleRoomButtonPressed}>
                                    Create a room
                                </Button>
                            </Grid>

                        </Grid>
                    
                    }/>
                </Routes>  
            </Router>

        
        );

}
export default HomePage;

The error shown is:

Error
    at invariant (index.js:46:20)
    at useNavigate (index.js:363:40)
    at HomePage (HomePage.js:23:83)
    at Ch (react-dom.production.min.js:157:137)
    at ck (react-dom.production.min.js:267:460)
    at bk (react-dom.production.min.js:250:347)
    at ak (react-dom.production.min.js:250:278)
    at Tj (react-dom.production.min.js:250:138)
    at Lj (react-dom.production.min.js:243:163)
    at Jg (react-dom.production.min.js:237:175)