classname in Nav(bootstrap) not working, button not working - reactjs

Question

i have a problem. My button is not working. Also, no matter what I write in className, the buttons don't move. And even if user.IsAuth = true, its still only auth button in my window
import React, {useContext} from 'react';
import {Context} from "../index";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import {NavLink} from "react-router-dom";
import {SHOP_ROUTE} from "../utils/consts";
import {Button} from "react-bootstrap";
import {observer} from "mobx-react-lite";
const NavBar = observer(() => {
const {user} = useContext(Context)
console.log(user)
return (
<Navbar bg="dark" variant="dark">
<NavLink style={{color:'white'}} to={SHOP_ROUTE}> ShopUS </NavLink>
{user.IsAuth ?
<Nav className="mr-auto" style={{color:'white'}}>
<Button variant={'outline-light'}>Admin</Button>
<Button variant={'outline-light'} className="ml-2">Exit</Button>
</Nav>
:
<Nav className="mr-auto" style={{color:'white'}}>
<Button variant={'outline-light'} onClick={()=> user.setIsAuth(true)}>Auth</Button>
</Nav>
}
</Navbar>
)
});
export default NavBar;
And UserStore (if someone need it)
import {makeAutoObservable} from 'mobx'
export default class UserStore{
constructor() {
this._isAuth = true
this._user = {}
makeAutoObservable(this)
}
setIsAuth(bool) {
this._isAuth = bool
}
setUser(user) {
this._user = user
}
get isAuth() {
return this._isAuth
}
get user() {
return this._user
}
}