tanasov49

Следить за кликами за пределами корневого узла:

function Modal(props) {
  const root = useRef();

  useEffect(() => {
    const onClick = e => root.current.contains(e.target) || закрытьОкно();
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <div ref={root}>
      ...
    </div>
  );
}

Или сделать так, чтобы корневой узел перекрывал всю страницу, и отслеживать клики по нему:

function Modal(props) {
  return (
    <div
      className="modal-overlay"
      onClick={e => (e.currentTarget === e.target) && закрытьОкно()}
    >
      ...
    </div>
  );
}

.modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

export default function HeaderMenuLinks(props) {
  return (
    <React.Fragment>
    {props.menuText.map((menu, key) => (
        const subTitle = menu.subtitle || false
        <li className='header-menu__link' key={key}>
            <p>{menu.title}</p>
            { subTitle && 
            <ul  className='link-menu'>
                {subTitle.map((sm, skey) => (
                <li className='link-menu__subtitle' key={skey}>{sm}</li>
                ))}
            </ul> 
          }
        </li>
    ))}
    </React.Fragment>
  )
}

Должно работать.
Зачем вы используете import url()?
Просто import 'file.scss'; как вы сделал с файлом variables

Да и вообще, в sass директива импорта, как и все другие пишется с собачкой

@import 'file.scss'