doctor.js

const Doctor = (props) => {
    const [opened, setOpened] = useState(false);
    return <div>
      {props.expandable && <Arrow onClick={() => setOpened(!opened)} />}
     </div>
}
  
const ExpandableDetector = (props) => { 
  const [expandable, setExpandable] = useState(false)
  return <ReactResizeDetector handleHeight onResize={(height) => setExpandable(height > props.maxHeight)}>
    {props.children(expandable)}
  </ReactResizeDetector>
    
}

const Page = () => {
  return <ExpandableDetector maxHeight={200}>
    {expandable => <Doctor expandable={expandable} {...doctorProps} />}
   </ExpandableDetector>
}