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

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
    }
}