인프런 커뮤니티 질문&답변

import React from "react";
import PropTypes from "prop-types";
import Link from "next/link";
import { Input, Menu, Row, Col } from "antd";
import { useState, UseMemo } from "react";
import UserProfile from "../components/UserProfile";
import LoginForm from "../components/LoginForm";
import styled from "styled-components";

const { Search } = Input;
const onSearch = (value) => console.log(value);
const SearchInput = styled(Input.Search)`
  verticalalign: middle;
  width: 200px;
  marginleft: 10px;
`;

const items = [
  {
    label: <Link href="/">노드버드</Link>,
    key: "mail",
  },
  {
    label: (
      <div>
        <Link href="/profile">프로필</Link>
        <SearchInput
          placeholder="input search text"
          enterButton="Search"
          onSearch={onSearch}
        />
      </div>
    ),

    key: "profile",
  },
  {
    label: <Link href="/signup">회원가입</Link>,
    key: "signup",
  },
];
let tmp = "mail";
const AppLayout = ({ children }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [current, setCurrent] = useState(tmp);
  console.log(current);
  const onClick = (e) => {
    console.log("click ", e);
    setCurrent(e.key);
    tmp = e.key;
  };
  return (
    <div>
      <Row>
        <Col span={12} offset={6}>
          <Menu
            mode="horizontal"
            onClick={onClick}
            selectedKeys={[current]}
            items={items}
          />
        </Col>
      </Row>

      <Row gutter={8}>
        <Col xs={24} md={6}>
          {isLoggedIn ? <UserProfile /> : <LoginForm />}
        </Col>
        <Col xs={24} md={12}>
          {children}
        </Col>
        <Col xs={24} md={6}>
          <a
            href="https://github.com/seroak"
            target="_blank"
            rel="noreferrer noopener"
          >
            Made by seooak
          </a>
        </Col>
      </Row>
    </div>
  );
};

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

export default AppLayout;

제가 메뉴를 만들 때 ant 디자인 공식문서를 보고 const item에 요소를 작성해서 메뉴를 만드는 방식으로 코드를 작성했는데 이렇게 작서하니까 SearchInput에 styled 컴포넌트를 적용하는 것이 안됩니다 어떤 방식이 좋을까요?

const SearchInput = styled(Input.Search)`
  verticalalign: middle;
  width: 200px;
  marginleft: 10px;
`;

const items = [
  {
    label: <Link href="/">노드버드</Link>,
    key: "mail",
  },
  {
    label: (
      <div>
        <Link href="/profile">프로필</Link>
        <SearchInput
          placeholder="input search text"
          enterButton="Search"
          onSearch={onSearch}
        />
      </div>
    ),

맨위의 코드가 전체 코드이고 제가 궁금한 부분이 있는 코드는 아래에 있습니다