forwardref with useImperativeHandle

togglabe.tsx

/* eslint-disable react/display-name */
import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'


const NoteForm = ({ createNote }) => {
  const [newNote, setNewNote] = useState('')

  const addNote = (event) => {
    event.preventDefault()
    createNote({
      content: newNote,
    })

    setNewNote('')
  }

  return (<>
    <div>
      <h2>Create a new note</h2>

      <form onSubmit={addNote}>
        <input
          value={newNote}
          onChange={event => setNewNote(event.target.value)}
        />
        <button type="submit">save</button>
      </form>
    </div>

		This should hide along with the form
  </>)

}

interface ChildType {
	children: React.ReactNode
}
const Togglable = forwardRef(({ children, buttonLabel }: { children: ChildType['children'], buttonLabel: string, }, refs) => {

  const [show, setShow] = useState(true)
  const showHide = () => setShow(!show)

  useImperativeHandle(
    refs,
    () => {
		 return { showHide, hey: () => console.log('brave') }
		 }
  )
  return (
    <div>
      {show && children}
      <br />
      <button onClick={showHide}>{buttonLabel}</button>
    </div>
  )
})

const Check = () => {

  const [note, setNote] = useState([])

  const toggleRef = useRef()

  const createNote = (noteObject: any) => {
    setNote(note.concat(noteObject.content))
    toggleRef.current.showHide()
    toggleRef.current.hey()
    console.log(toggleRef)
  }

  return (
    <div><Togglable buttonLabel='hider' ref={toggleRef}>
      <NoteForm createNote={createNote} />
    </Togglable>
    <br />
    {note.map(n => <>{n}</>)}
    </div>
  )
}

export default Check