useForm {...register} on an antd dropdown element

Question

I'm using react hook form package to create a form and I want one of my fields to be a Dropdown field (by antd). All my atempts to make this did not work. I also tried a custom solution which broke the way the form acts. The register function as I understand needs to be called on an Input element which is probably why it's not working on the Dropdown. But I can't wrap the Dropdown in Input as it can't return anything (void method).

How do I add a dropdown element and retrieve its data using react-hook-form?

Here is what I tried:

import React from "react";
import { Menu, Dropdown, Button, message, Space, Tooltip } from "antd";
import { DownOutlined, UserOutlined } from "@ant-design/icons";

const CustomDropdown = (
  register
) => {
  const menu = () => {
    return (
      <Menu onClick={() => {}}>
        <Menu.Item key="1" icon={<UserOutlined />}>
          1st menu item
        </Menu.Item>
        <Menu.Item key="2" icon={<UserOutlined />}>
          2nd menu item
        </Menu.Item>
        <Menu.Item key="3" icon={<UserOutlined />}>
          3rd menu item
        </Menu.Item>
      </Menu>
    );
  };

  const onSelect = (event) => {
    console.log(event);
  };

  return (
    <Space wrap>
      <Dropdown className="flex flex-col" overlay={menu} {...register}>
        <Button>
          Select... <DownOutlined />
        </Button>
      </Dropdown>
    </Space>
  );
};

export default CustomDropdown;

here I pass the register from a top form element which doesn't work. I tried putting this element in the form which didn't work.

I also couldn't find any information regarding dropdown elements in react-hook-form. What am I missing?