ReactJS：在导航栏中使用 Select inside Link 组件时如何避免重定向

我在下面的‘导航栏’的<Link>组件中有一个Select组件:

const Navbar = (props) => {

    return (
        <Link to='/'>
            <div className='navbar'>

                <img src={logo} className="App-logo" alt="App Name"/>
                <h1 className='app_name'>My App Name</h1>
                <BaseCurrencySelect baseCurrency={props.baseCurrency} stateChanger={props.stateChanger}/>
            </div>
        </Link>
    )
}

下面是我的BaseCurrencySelect个组成部分:

export default function BaseCurrencySelect(props) {

    const [baseCurrency, setBaseCurrency] = React.useState(props.baseCurrency);

    const handleChange = (event) => {
        let selectedCurrency = CurrencyUtils.getCurrencyFromId(event.target.value)
        setBaseCurrency(selectedCurrency);
        props.stateChanger(selectedCurrency);
    };

    return (
        <Box className="MuiSelect-box" sx={{minWidth: 50}}>
            <FormControl fullWidth>
                <Select
                    className="MuiSelect-select"
                    labelId="currency-select-label"
                    id="currency-select"
                    value={baseCurrency.id}
                    onChange={handleChange}
                >
                    <MenuItem value={CurrencyUtils.currencies.EUR.id}>EUR</MenuItem>
                    <MenuItem value={CurrencyUtils.currencies.USD.id}>USD</MenuItem>
                    <MenuItem value={CurrencyUtils.currencies.BTC.id}>BTC</MenuItem>
                    <MenuItem value={CurrencyUtils.currencies.ETH.id}>ETH</MenuItem>
                </Select>
            </FormControl>
        </Box>
    );
}

问题是，当用户从Select组件中 Select 一项时，它的行为就像用户已经点击了导航栏中的Link，因此将用户重定向到Link的toprops ，即‘/’.

相反，我希望用户在与Select组件交互后留在当前路由上，并且只呼叫stateChanger.

如何落实这一点？