Gary_Ihar

const [width, setWidth] = useState(500)
Вешаешь событие на инпут onChange и меняешь стейт.
На элементе делаешь так:

<div style={{width: `${width}px`}}> ширина блока <\div>

Должно сработать

Если Ваш localDate() возвращает некое число, которое можно сравнить, то можно решить так:

ObjName.users.map(item=>item.messagesData.map(date=>[date.messDate, date.messValue])).flat().sort((a, b) => a[0] - b[0]).forEach(elem => {
    console.log(elem[1]);  //  выведутся сообщения по времени
  });

В терминале команду npm run build сделайте

Я почти уверен, что тут можно обойтись без js. CSS должен справиться налегке. Попробуйте @keyframes и поиграть с параметром scale и opacity у двери и лого на определенных моментах. Мне кажется, что это поможет достигнуть цели "приближение к пользователю".
Открывающуюся дверь тоже таким же способом , но уже с помощью translate как-нибудь

new Date() Вам должен помочь