react-error-boundary catching error in inner component

I have a component render hierarchy as below

import {ErrorBoundary} from 'react-error-boundary'
function errorFallback({error,resetErrorBoundary})
{
   return(<div>Some error occured!!!</div>);
}
<div>
   <ErrorBoundary FallbackComponent={errorFallback}>
   <studentDetails>
       <studentContacts/>
   </studentDetails>
   </ErrorBoundary>
</div>

studentContacts is as follows

function studentContacts(props)
{
  function formatContacts(in)
   {
     throw Error("Test error occured in StudentContacts-formatContacts");
   }
  return (<label>{formatContacts(input)}</label>
}
export default studentContacts;

My question is:

Error thrown from inner component studentContacts is not being displayed by ErrorBoundary

Anything I am missing here?