react + laravel ошибка в ренедере

Доброе время суток пытаюсь сделать рендер блока в месте шаблонизатором blade laravel получаю большую ошибку пример кода

<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
    <div className="wrap">
        <div className="container">
            <div className="row">
                @foreach($posts as $post)
                <div className="col-sm">
                    <div className="card" style="width: 18rem;">
                        <img className="card-img-top" src="@{{ 
       asset('img/'.$post->avatar )}}" alt="Card image cap">
                            <div className="card-body">
                                <h5 className="card-title">@{{!! $post   
                  ->name !!}}</h5>
                                <p className="card-text">@{{!! $post     
              ->description!!}}</p>
                  <a href="#" className="btn btn-primary">Go somewhere</a>
                            </div> 
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
,
document.getElementById('root')
);
</script>

в чем ошибка не пойму

Uncaught SyntaxError: Inline Babel script: Unexpected token (11:71)
   9 |                             <img className="card-img-top" src="{{ 
asset('img/'.$post->avatar )}}" alt="Card image cap">
 10 |                                 <div className="card-body">
 > 11 |                                                                
         <h5 className="card-title">@{title 1}</h5>``
 |                                                                        
                                            ^
             12 |                                                       
      <p className="card-text">@{lorem}</p>
 13 |                                     <a href="#" className="btn btn- 
primary">Go somewhere</a>
 14 |                                 </div>
  at r.l.raise (babel.min.js:27)
  at r.c.unexpected (babel.min.js:27)
  at r.c.expect (babel.min.js:27)
  at r.E.jsxParseExpressionContainer (babel.min.js:28)
  at r.E.jsxParseElementAt (babel.min.js:28)
  at r.E.jsxParseElementAt (babel.min.js:28)
  at r.E.jsxParseElementAt (babel.min.js:28)
  at r.E.jsxParseElementAt (babel.min.js:28)
  at r.E.jsxParseElementAt (babel.min.js:28)
  at r.E.jsxParseElementAt (babel.min.js:28)