无法使用reactjs更改头像中的图像

import React, { useState } from 'react';

function Avatar() {
  const [imageSrc, setImageSrc] = useState('initial-image.jpg');

  const changeImage = (newImage) => {
    setImageSrc(newImage);
  };

  return (
    <div>
      <img src={imageSrc} alt="Avatar" />
      <button onClick={() => changeImage('new-image.jpg')}>Change Image</button>
    </div>
  );
}

export default Avatar;

<button onClick={changeImage}>Change Image</button>

import React, { useState } from 'react';

function Avatar() {
  const [imageSrc, setImageSrc] = useState('initial-image.jpg');

  const changeImage = (newImage) => {
    setImageSrc(newImage);
  };

  return (
    <div>
      <img src={imageSrc} alt="Avatar" style={{ width: '100px', height: '100px' }} />
      <button onClick={() => changeImage('new-image.jpg')}>Change Image</button>
    </div>
  );
}

export default Avatar;