antd Menu toggle device toolbar 질문입니다.

메뉴를 구현하고 모바일버전에서도 확인을 하고싶어서 개발자도구에서 toggle device toolbar를 클릭하고 메뉴의 버튼들을 눌렀는데

이러한 에러가 뜹니다.  그리고 모바일로 접속해서 클릭을 해봐도 동일한 오류가 뜹니다. 이러면은 antd-mobile로 메뉴를 두개로 구성을 해야하나요?

아래는 제 코드입니다.

import PropTypes from "prop-types";
import React, { useCallback } from "react";
import Link from "next/link"
import {Menu, Input, Row, Col} from "antd";
import UserProfile from "./UserProfile";
import LoginForm from "./LoginForm";
import styled from "styled-components";
import {useSelector} from "react-redux";
import  Router  from "next/router";
import useInput from "../hooks/useInput";


const InputSearch = styled(Input.Search)`
    vertical-align: middle;
`;

const AppLayout = ({ children }) => {
    const {me } = useSelector((state) => state.user);
    const [search, changeSearch] = useInput('');
    const searchHashtag = useCallback(() => {
        Router.push(`/hashtag/${search}`);
    }, [search]);

    return (
        <div>
            <Menu mode="horizontal">
                <Menu.Item key="home">
                    <Link href={"/"}><a>home</a></Link>
                </Menu.Item>
                <Menu.Item key="profile">
                    <Link href={"/profile"}><a>profile</a></Link>
                </Menu.Item>
                <Menu.Item key="search">
                    <InputSearch  
                        enterButton 
                        value={search}
                        onChange={changeSearch}
                        onSearch={searchHashtag}/>
                </Menu.Item>
                <Menu.Item key="signup">
                    <Link href={"/signup"}><a>signup</a></Link>
                </Menu.Item>
            </Menu>
            <Row gutter={8}>
                <Col xs={24} md={6}>
                    {me ? <UserProfile/> : <LoginForm />}
                </Col>
                <Col xs={24} md={12}>{children}</Col>
                <Col xs={24} md={6}><a href="https://velog.io/@mayrang" target="_blank" rel="noreferrer noopener">Made by Mayrang</a> </Col>
            </Row>
        </div>
    );
};



AppLayout.propTypes = {
    children: PropTypes.node.isRequired,
};

export default AppLayout;