JAVASCRIPT

javascript Scroll into a div that is hidden initially in react

import {Picker} from "emoji-mart";
const pickerRef = useRef()
const[showEmojis,setShowEmojis]=useState(false);

useEffect(() => {
 
   pickerRef.current.scrollIntoView(true)
  
} , [showEmojis])


return(
<>
   <EmoticonContainer >
        <Picker id="picker" style={{width: '100%'}} onSelect={addEmoji}/>
    </EmoticonContainer>
    <div ref={emojiRef}></div>
</>
)

const EmoticonContainer=styled.div`
display:flex;
flex-direction:column;
`;