Как создать ref в компоненте на основе класса и передать его функциональному компоненту в реакции?

Итак, у меня есть этот компонент на основе класса:

import React, { Component } from 'react'
import './OptionsMenu.sass'

import DropdownBox from '../DropdownBox/DropdownBox'
import Icon from '../Icon/Icon'

class OptionsMenu extends Component {
    constructor(){
        super()
        this.dropdownBoxRef = React.createRef()
    }

  handleClickOutside = event => {
    if (this.dropdownBoxRef && !this.dropdownBoxRef.current.contains(event.target)) {
      this.props.close()
    }
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside)
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside)
  }

  render() {
    const options = this.props.options.map(option => (
      <li className='OptionsList-Element'>
        <div className='OptionsList-ElementIcon'>
          <Icon name = {option.icon} />
        </div>
        <span>{option.label}</span>
      </li>
    ))
    return (
      <DropdownBox reference = {this.dropdownBoxRef} styles = {this.props.styles}>
        <ul className='OptionsList'>{options}</ul>
      </DropdownBox>
    )
  }
}

export default OptionsMenu

В конструкторе я создаю ref, а затем хочу передать его компоненту DropdownBox, который отображается. В компоненте DropdownBox я пытался использовать хуки реагирования, но я думаю, что это неправильный путь. Как сделать это правильно? Обратите внимание, я не хочу переключать свой функциональный компонент на классовый!

Вот код компонента DropdownBox:

const dropdownBox = props => {
  const dropdownBoxRef = useRef(props.reference) 

  return (
    <div ref = {dropdownBoxRef} className='DropdownBox-Container' style = {props.styles}>
      <div className='DropdownBox'>
        <div className='DropdownBox-Triangle' />
        {props.children}
      </div>
    </div>
  )
}