react-bootstrap and semantic-ui-react not working in apollo-client

Question

I am learning about Graphql, apollo-server, and apollo-client and while I'm trying to design the client page, I found react-bootstrap and semantic-ui-react not working on the client.

Navbars.js

import React, { useState } from 'react';
import { Menu } from 'semantic-ui-react';

export default function Navbars() {

  const [activeItem, setAtiveItem] = useState('');
  const handleItemClick = (e, { name }) => setAtiveItem(name);

  return (
    <Menu pointing secondary>
        <Menu.Item
            name='Home'
            active={activeItem === 'Home'}
            onClick={handleItemClick}
        />

        <Menu.Menu position='right'>
            <Menu.Item
                name='Login'
                active={activeItem === 'Login'}
                onClick={handleItemClick}
            />
            <Menu.Item
                name='logout'
                active={activeItem === 'logout'}
                onClick={handleItemClick}
            />
        </Menu.Menu>
    </Menu>
   );
};

result

How can I fix this?