Problem z grid-template-area

Chciałbym aby elementy układały się w ten sposób w kontenerze (.book-container):

-----------    -----------    -----------    -----------
|  .book  |    |  .book  |    |  .book  |    |  .fav   |
-----------    -----------    -----------    -----------

A przeglądarka krzyczy, że "grid-area" ma nie poprawną wartość.

        div.book-container {
            position: relative;
            width: 100%;
            height: 100%;
        
            grid-template-columns: 25% 25% 25% 25%;
            grid-template-rows: 3.5em;
            grid-template-areas: "book book book fav";
        
            div.book {
                grid-area: "book";
                width: 2em;
            
                border: 1px red solid;
            
                &.fav {
                    grid-area: "fav" !important;
                    background-color: blueviolet;
                }
            }
        }

Z tego, co rozumiem ze specyfikacji, to grid-area ma niepoprawną wartość. Nie powinien być to "ciąg znaków". Zobacz w specyfikacji: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area.