Свойство перехода CSS не работает при установке состояния с помощью события mousenter ⇐ CSS

[Anonymous]

Я хочу, чтобы рядом с кнопкой отображался анимированный текст при наведении на нее курсора. Это отлично работает, когда я использую событие click на кнопке, но не работает при использовании событий mouseenter и mouseleave.
Я анимирую использование перехода CSS -

Код: Выделить всё

#text-container {
transition: max-width 3s ease;
overflow-x: hidden;
}

Код: Выделить всё

App.tsx

файл -

Код: Выделить всё

import { useEffect, useState } from 'react';
import './App.css';

const TextComponent = () => {
const [maxWidth, setMaxWidth] = useState('0vw');

useEffect(() => {
setMaxWidth('100vw');
}, []);

return (

Sample text??

);
};

function App() {
const [show, setShow] = useState(false);

return (
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
width: '300px',
}}
>
 setShow((prevShow) => !prevShow)}
// onMouseEnter={() => setShow(true)}
// onMouseLeave={() => setShow(false)}
>
Show Text


{show ?  : null}

);
}

export default App;

StackBlitz – ссылка


Подробнее здесь: https://stackoverflow.com/questions/791 ... nter-event