i am have issue with React Hook called inside a callback

This is my current code

export default function InteractableAreasList(): JSX.Element {  useTownController();  const activeConversationAreas = useActiveConversationAreas();  return (<Box><Heading as='h2' fontSize='l'>        Active Areas:</Heading>      {activeConversationAreas.length === 0 ? (<>No active conversation areas</>      ) : (        activeConversationAreas          .filter(area => area.isActive())          .sort((a1, a2) => a1.id.localeCompare(a2.id))          .map(area => {            const friendlyName = useInteractableAreaFriendlyName(area);            const occupants = useInteractableAreaOccupants(area);            return (<Box key={area.id}><Heading as='h3' fontSize='m'>                  {area.id}: {friendlyName}</Heading><UnorderedList>                  {occupants.map(occupant => (<ListItem key={occupant.id}><PlayerName player={occupant} /></ListItem>                  ))}</UnorderedList></Box>            );          })      )}</Box>  );}

And I am having two error messages when i run the command npm run lint.39:34 error React Hook "useInteractableAreaFriendlyName" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook functionreact-hooks/rules-of-hooks40:31 error React Hook "useInteractableAreaOccupants" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function
react-hooks/rules-of-hooks

I tried to write a helper function so that, but in the end, i find out i am still called the helper function inthe callback