Marca de fechamento de JSX correspondente esperada

Estou tentando converter uma página que tenho em HTML/CSS para react, mas ela apresenta alguns erros. um deles é esse:

Marca de fechamento de JSX correspondente esperada para 'nav'.ts(17002) Já tentei de tudo, não achei tag aberta nem fora de ordem, não consigo identificar onde está o erro.

Segue o código

import React from 'react'

const Nav = props => {
<div>
    <nav className='navbar navbar-default'>
        <div className='menu-wrap'>
            <div className='navbar-header'>
                <div className='navbar-brand'>
                    <h1>
                        <a href='index.html'> <img src='images/logo_v1.png' height='10' width='110' alt='MR. TRAÇA' /></a>
                    </h1>
                </div>
            </div>
            {/* menu principal */}
            <div className='navbar-collapse hidden-sm hidden-xs'>
                <ul className='nav navbar-nav'>
                    <li className='dropdown active'>
                        <a data-toggle='dropdown' href='#'>Home</a>
                    </li>
                    <li className='dropdown'>
                        <a data-toggle='dropdown' className='dropdown-toggle disabled' href='livros.html'>Livros</a>
                    </li>
                    <li className='dropdown'>
                        <a data-toggle='dropdown' className='dropdown-toggle disabled' href='autores.html'>Autores</a>
                    </li>
                    <li className='dropdown'>
                        <a data-toggle='dropdown' className='dropdown-toggle disabled' href='editoras.html'>Editoras</a>
                    </li>
                </ul>
                {/* Cabeçalho*/}
                <div className='header-topbar hidden-md'>
                    <div className='topbar-links'>
                        <a href='login.html'><i className='fa fa-lock'></i>Login / Registro</a>
                </div>    
                {/* Fim Cabeçalho */}

                {/*Menu mobile*/}
                    <div className='mobile-menu hidden-md hidden-lg'>
                        <a href='#mobile-menu'><i className='fa fa-navicon'></i></a>
                        <div id='mobile-menu'>
                            <ul>
                                <li className='mobile-title'>
                                    <h4>Menu</h4>
                                    <a href='#' className='close'></a>
                                </li>
                                <li>
                                    <a href='index.html'>Home</a>
                                </li>
                                <li>
                                    <a href='news-events-list-view.html'>Detalhes do Livro</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <nav />

</div>
</div>
}

export default Nav