css transition property does not work when setting state using mousenter event

I want to show an animated text next to the button upon hovering the button. This works fine when I am using click event on button but doesn’t work when using mouseenter and mouseleave events.

I’m animating using CSS transition –

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

App.tsx file –

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

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

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

  return (
    <div id="text-container" style={{ maxWidth, paddingLeft: '8px' }}>
      <div style={{ textWrap: 'nowrap' }}>Sample text??</div>
    </div>
  );
};

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

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

      {show ? <TextComponent /> : null}
    </div>
  );
}

export default App;

StackBlitz – link