One implementation could be:

Install react-icons, styled-components using Directory section on the left panel.
Update App.js

import Menu from './Menu';

import { FaChevronRight } from 'react-icons/fa';

export default function App() {
  return (
    <div>
      
        
          Home
          
        
        
          Questions
          
        
        
          Resources
          
        
        
          Profile
          
        
        
          Account
          
        
      
    </div>
  );
}

Implement Menu/index.js

import styled, { keyframes } from 'styled-components';

// right arrow animation
const moveFadeIn = keyframes`
  0% {
    opacity: 0;
    margin-right: 10px;
  }

  100% {
    opacity: 1;
    margin-right: 0px;
  }
`;

const MenuItemContainer = styled.div`
  display: flex;
  justify-content: space-between;
  align-tiems: center;

  color: black;
  padding: 13px 16px;
  border-bottom: 1px solid #ebebeb;
  transition: all 0.2s ease-in-out;

  svg {
    opacity: 0;
  }

  &amp;:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.03);

    svg {
      animation: ${moveFadeIn} 500ms forwards;
    }
  }
`;

const MenuContainer = styled.div`
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
`;

const Menu = ({ children }) =&gt; {
  return {children};
};

const MenuItem = ({ children }) =&gt; {
  return {children};
};

Menu.Item = MenuItem;

export default Menu;

How to create a vertical menu in React.js? | Beginner Frontend Coding Challenge | UI Machine Coding Round | JavaScript

@Devtools Tech