How to pass in React JS (Chakra UI template) a value to another page?

Question

I have a StartPage, where user can choose to login as Patient or as Medic, by clicking on 2 separate buttons. Also, I have a login page, that will take parameters from the StartPage (for example, person clicks on the button Patient, and the next page will be login where he will be recognized as a patient and will input some ID or whatever).

I have tried to create a constant [userType, setUserType] = useState(''); and to use react-router-dom method, by the paths in links

onClick={() => {
                setUserType('pacient');
              }}
<ChakraLink as={ReactRouterLink} to={`/login/${userType}`} style={{ textDecoration: 'none' }}>
                  <Flex flexDirection="column" h="197px">
                    <Image
                      src={isPacientHovered ? "/images/pacient_icon_white.png" : "/images/pacient_icon.png"}
                    />
                    <Text fontSize="2xl" fontWeight="bold" bgClip='text' bgGradient={isPacientHovered ? 'linear(to-l, #FFFFFF, #FFFFFF)' : 'linear(to-l, #4CBCAC, #05C47C)'} >Pacient</Text>
                  </Flex>
                </ChakraLink>

, but I encountered a problem: when I get redirected, I dont get a userType, exactly - it is an empty string. I verified it by displaying it on the LoginPage:

import React, { useState } from 'react';
import { Box, Button, FormControl, FormLabel, Input, Stack, Text } from '@chakra-ui/react';
import { useParams } from 'react-router';

const LoginPage = () => {
    const { userType } = useParams();

    return (
        <div>
            <h2> Role {userType}</h2>
        </div>
    );
};

export default LoginPage;

What should I do in order to accomplish my task?