React скрытие элемента через useRef сортировка работает, а элемент не скрывается(((

не работает удаление блока `

import React,{useState,useRef} from "react";
import styles from "./MySelect.module.css"

const MySelect = React.forwardRef((props,ref)=>{

const[value,setValue]= useState(props.defaultValue);

const wrapperButton =useRef();

function hideWrapper(){

if(wrapperButton.current.style.display==="none"){
    wrapperButton.current.style.display="flex";
}else if( wrapperButton.current.style.display==="flex"){
    wrapperButton.current.style.display="none";
}
}


function forSetValue(option){
    setValue(option.name);
    props.onChanges(option.value)
}
return(
    <div>
        <button className={styles.select} onClick={hideWrapper}>{value}</button>
        <div className={styles.wrapperOptions} ref={wrapperButton}>
            <button disabled>{props.defaultValue}</button>
            {props.options.map(option=><button onClick={()=>forSetValue(option)} className={styles.option} key={option.name} value={option.value}>{option.name}</button>)}
        </div>
    </div>
)
})

export default MySelect

`