I want to switch the icon display when the backend json value changes in React.js

Currently, I'm making a system that can control home electrical equipment on the web. Backend is ready, depending on the state of the backend I would like to switch icons.

When backend Json value changes, I want to switch the icon display

The Issue is that When I click the Onclick part Although the backend Json value has changed but Photo switching does not occur

LockDetail.js

import React, { useState, useEffect, useCallback, onClick} from 'react';
import axios from 'axios';

import ic_locked from "../../images/icons/ic_locked.png"
import ic_unlockeds from "../../images/icons/ic_unlockeds.png"

const LockDetail = () => {

  const [lock, setLock] = useState([]);

  
  const Unlock = async(data) => {
    await axios.post('xxx.com/unlock',
      {
        entity_id: entity_id, 
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log(result.data);
        console.log('Unlocked!');
        alert('Unlocked!');
      })
      .catch(err => {
        console.log(err);
        console.log('Unlocked Missed!');
      });
  }


  const Lock = async(data) => {
    await axios.post('xxx.com/lock',
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${cookies.get('accesstoken')}`
        },
      })
      .then(result => {
        console.log(result.data);
        console.log('Locked!');
        alert('Locked!');
      })
      .catch(err => {
        console.log(err);
        console.log('Locked Missed!');
      });
  }

const getDevices = async(data) => {
  await axios.get('xxx.comm/device_list',
    {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${cookies.get('accesstoken')}`
      },
    })
    .then(result => {
      console.log(result.data)
      setLock(result.data.attributes.lock);  
    })
    .catch(err => {
      console.log(err);
    });
}

useEffect(() => {
  getDevices();
    }, []);

  return (
    <div className="container">
      <div className="row mx-auto text-center">
          <>
            {lock.map((item,i) => 
              <div key={i} className="col-12">
                <div className="box">
                <p>Lock Status</p>
                  {item.state == "Locked" ?
                    <img className="" src={ic_locked} />
                  :
                    <img className="" src={ic_unlockeds} />
                  }
                
                  <p className="state">{item.state}</p>
                </div>
    
                  {item.state == "Locked" ?
                    <img className="" src={ic_unlockeds} onClick={Lock}/>
                  :
                    <img className="" src={ic_locked} onClick={Unlock}/>
                  }

              </div>
            )}

          </>
      </div>

    </div>
  );
}
export default LockDetail;

Json

    {
        "state": "Locked",
    },