Open react-select when you press on an icon

I’m trying to open select menu when you click on the icon. How can I do that in react ? This is the code And I want to remove the default select I just want when you click icon to open the react-select

/* eslint-disable @typescript-eslint/no-unused-vars */
import Select, { components } from "react-select";

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useEffect, } from "react";

interface Props {
  avatarObj: any;
  // initalAvatarObj: any;
  avatarSvg?: any;
  // initialAvatarSvg?: any;
}

const CustomizeAvatar: React.FC<Props> = ({ avatarObj, avatarSvg }) => {

  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
  ]

  return (
    <div className="relative flex items-center justify-center h-64 w-full">
      <div className="w-36" dangerouslySetInnerHTML={{ __html: avatarSvg }} />
      <FontAwesomeIcon icon='hat-cowboy' className="absolute top-1" />
      <div className="absolute top-7">
        <Select
          className="w-23"
          options={options}
        />
      </div>
    </div>
  )
};

export default CustomizeAvatar;


enter image description here

Answer

I managed to solve it myself, you had to change default styles like this demo here: https://gyazo.com/9fa746ce88c70272e264b0d040c40212

/* eslint-disable @typescript-eslint/no-unused-vars */
import Select from "react-select";

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {  useRef, useState } from "react";

interface Props {
  avatarObj: any;
  // initalAvatarObj: any;
  avatarSvg?: any;
  // initialAvatarSvg?: any;
}

const CustomizeAvatar: React.FC<Props> = ({ avatarObj, avatarSvg }) => {
  const selectRef = useRef<any>({});
  const [openMenu, setOpenMenu] = useState(false);
  const [open, setOpen] = useState(false)

  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
  ]

  const customStyles = {
    option: (provided: any, state: { isSelected: any }) => ({
      ...provided,
      borderBottom: '1px dotted pink',
      color: state.isSelected ? 'red' : 'blue',
      width: 200,
    }),
    container: () => ({
      width: 200,
    }),
    control: () => ({
      border: "none",
      display: "none",
      width: 0,
    }),
  };


  return (
    <div className="relative flex items-center justify-center h-64 w-full" onClick={() => setOpen(!open)} >
      <FontAwesomeIcon icon='hat-cowboy' className="absolute top-1" onClick={() => setOpen(!open)} />
      <div className="absolute top-7">
        <Select
          placeholder=""
          styles={customStyles}
          options={options}
          menuIsOpen={open}
        />
      </div>
    </div>
  )
};

export default CustomizeAvatar;