object Object вместо html тега br

Ситуация следующая, пишу приложение на функциональном компоненте React.js, в стейт забиваю значение текстового инпута, а после беру в этом стейте все его значения и вывожу в параграф в другой части страницы.

Проблема в том, что значения стейта выводятся друг за другом, в одну строку, а мне нужно оформить так, что бы они выстраивались в стоблик, для этой задачи мне подойдёт тег разрыва строки <br/>, но проблема в том, что когда я его прописываю, то в выводе я получаю тот же вывод в одну строку, но с разделителем [object Object]

Какие есть варианты решения ?

Добавление брейка пробовал сделать по-разному, но результат одинаковый, вот вариант с джойном в параграфе

<p>
    {state.join(<br />)}
</p>

вот вариант добавления брейка на этапе сетСтейта

setState([...input, input.value + <br/>])

В обоих случаях, в рендере вижу

Item 1[object Object]Item 2[object Object]Item 3

Вместо желаемого

Item 1
Item 2
Item 3