Actualmente estoy trabajando en esto donde tengo 4 botones y cada uno de ellos cambia la imagen en un div separado. Casi lo he hecho, aunque cuando la página vuelve a cargar, la imagen está en blanco y solo se muestra cuando paso el mouse sobre un botón. Quiero que la imagen esté predeterminada en la primera opción en la recarga de la página.

 function App() { const [image, setImage] = useState('') return ( <div> <button type="button" onMouseEnter={() => setImage(image1) }></button> <button type="button" onMouseEnter={() => setImage(image2) }></button> <button type="button" onMouseEnter={() => setImage(image3) }></button> <button type="button" onMouseEnter={() => setImage(image4) }></button> </div> <div> <img src={image} /> </div> ); } export default App;