Overriding numb components in React and Vanilla JavaScript (Using hooks)

override_button_hook.jsx

/* In this example, we would be preppending
 * a button to a component
 * Learn to overrride components we can't control
 * By Precious Akin
*/

import React, { useState, useEffect } from 'react';
import FakeButton from 'react-fake-button';

export default ()=>{

    useEffect(()=>{
        // say you want to override using vanilla Javascript
        // we run this tweak on first DOM contact
        // the FakeButton component generates:
        // <button class="fake-button">I am a Fake! </button>
        let image_el = document.createElement("img");
        let btn = document.querySelector(".fake-button");
        image_el.src = '../img_obj.svg';
        image_el.classList.add("image-class"); 
        btn.insertBefore(image_el, btn.firstChild);
    },[]);

  return (
    <div>
      <FakeButton text="I am a Fake!"
      />
    </div>
  );
}