Estoy creando una aplicación de chat web en next.js y tengo un botón selector de emoji que cuando se hace clic en el menú de emojis aparece. La cuestión es que para que el usuario vea el menú de emojis, tiene que desplazarse hacia abajo. Tengo probé scrollIntoView() pero no parece funcionar, posiblemente estoy haciendo algo mal.

 <EmoticonContainer > {showEmojis && (<Picker id="picker" style={{width: '100%'}} onSelect={addEmoji}/>)} </EmoticonContainer> <InputContainer id="container" > <IconButton onClick={() => {setShowEmojis(!showEmojis),()=>document.getElementById('picker').scrollIntoView(true)}}> <EmojiEmotionsIcon style={{ color: 'purple' }} fontSize='inherit' /> </IconButton> <Input style={{fontFamily:"Roboto",fontSize:"12px"}} onKeyUp={()=>ChangeSendIcon()} onKeyPress={(e) => { e.key === 'Enter' && e.preventDefault(); }} value={input} onChange={e=> setInput(e.target.value)}/> <div> <IconButton id="send" onClick={sendMessage} style={{ color: 'purple',display:'none' }} disabled={!input} type="submit"> <SendIcon></SendIcon> </IconButton> <IconButton style={{ color: 'purple'}} id="record" onMouseUp={()=>record()}> <MicIcon ></MicIcon> </IconButton> <IconButton style={{ color: 'purple',display:"none" }} onClick={()=>stop()} id="stop" > <StopIcon></StopIcon> </IconButton> </div> </InputContainer>

He intentado esto pero no parece funcionar:

 useEffect(() => { if(showEmojis) { document.getElementById('picker').scrollIntoView(true) } } , [showEmojis])