When I click on my useNavigate it reloads my page and wipes the state i gave it. How do i prevent this

I have a page that has a pediatric and a adult version to access these i have two buttons that link to the same page but just i send a different state so I can load the page depending on what state it was previously sent. The problem is my pediatric navigate reloads the page on button press and causes the the location.state to be null

    const handleNavigate = (e) => { console.log(algorithms[e]); navigate('/medical/aha-algorithms/algorithms', {state: {...algorithms[e]}}) }
    
    return(
        <div className='homepage-container'>
            <Grid2 item xs={12} md={4} sx={{width: '100%'}}>
                <Grid2 item xs={12} md={4} sx={{width: '100%'}}>
                    <Card 
                        sx={pageButtons}
                        onClick={() => handleNavigate('pediatric')}
                    >
                        <CardContent sx={buttonConent}>
                            <Typography variant="h6" sx={{textAlign: 'center', color: 'white'}} mb={2}>PEDIATRIC</Typography>
                        </CardContent>
                    </Card>
                </Grid2>
                <Grid2 item xs={12} md={4} sx={{width: '100%'}}>
                    <Card 
                        sx={pageButtons}
                        onClick={() => handleNavigate('adult')}
                    >
                        <CardContent sx={buttonConent}>
                            <Typography variant="h6" sx={{textAlign: 'center', color: 'white'}} mb={2}>ADULT</Typography>
                        </CardContent>
                    </Card>
                </Grid2>
            </Grid2>
        </div>
    )

i was expecting the above on both button presses to show the page at /medical/aha-algorithms/algorithms and have a state for each item

here is the code from the algorithms page

export default function Algorithms() {
    const location = useLocation(); 
    console.log(location)

    const navigate = useNavigate() // to move to the page with specific pdfs in it 
    return(
        <h1>Algorithms</h1>
    )
}