안녕하세요! ant design 사용 관련 질문드립니다ㅠㅠ

이것이 antd 홈페이지(https://ant.design/components/dropdown/#components-dropdown-demo-basic)에 나와있는 drop down 메뉴 적용 화면인데 코드를 실제로 적용하면

다음과 같이 적용됩니다. 왜 이렇게 적용되는 것일까요?ㅠㅠ

밑에는 작성한 코드입니다.

import React, { useState } from 'react'
import { Menu, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';



function SearchResultList() {

  const menu = (
    <Menu>
      <Menu.Item key="0">
        <a href="http://www.alipay.com/">1st menu item</a>
      </Menu.Item>
      <Menu.Item key="1">
        <a href="http://www.taobao.com/">2nd menu item</a>
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="3">3rd menu item</Menu.Item>
    </Menu>
  );
  return (
    <div>
      
      <Dropdown overlay={menu} trigger={['click']}>
        <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
          Click me <DownOutlined />
        </a>
      </Dropdown>
    </div>
  )
}

export default SearchResultList