I guys, im new in react, want to set the new value of the usestate to a img tag component child

See more:

Javascript

ReactJS

Hi, I want to rerender a image with the new value of the useState of the component that its in a child component passing the props Im adding the code from both component

What I have tried:

import DefaultColor from './DefaultColor';
function App() {  
colorData = [{color: "black",background: "black"},{color: "mint", background:"#2CB695"}];
const afterClick = (e) =>{
    
       setBody(e.target.id)      
     }
  
const [body, setBody] = useState("Black")
   
  return (
  <>

  <div className="container">

     <DefaultColor props={body}/>

  </div>
        
      <div className="container-car">

      {ColorsData.map((color,background) =>{
            return(
              <div className="card-car">
                    <div className="box-car"
                      key={color.color + body}
                      id={color.color} 
                      onClick={afterClick}
                      style={{background : color.background}}>
                    </div>
                    <p>{color.color}</p>
             </div>  
                   )
           })}
        </div>
      </div>
</>
```

```code
function DefaultColor(props) {
  return (
    <> 
       <div className="default-container">        
           <img src="./images/abc-{body}.png"/>       
       </div>
    </>
  )
}

export default DefaultColor