【React】チェックボックスのデザインを画像に変更する方法

やりたいこと

チェックボックスを画像にする
・押下したらアイコンの色を変える
・複数選択可能

デフォルト

これにしたい

選択時

準備

アイコン画像は、src/public/imgに格納

コード

App.js

import "./styles.css";
import React, { useState } from "react";

const unCheckIconPath = "./img/ic_check.png";
const checkedIconPath = "./img/ic_checked.png";

const listItems = [
  {
    id: "checkbox1",
    title: "Apple"
  },
  {
    id: "checkbox2",
    title: "Orange"
  },
  {
    id: "checkbox3",
    title: "Banana"
  }
];
export default function App() {
  const [selected, setSelected] = useState({});

  const confirmCheck = (e) => {
    setSelected({
      ...selected,
      [e.target.id]: e.target.checked
    });
  };
  const changeIcon = (item) => {
    return selected[item.id]
      ? (item.icon = checkedIconPath)
      : (item.icon = unCheckIconPath);
  };
  return (
    <div className="App">
      {listItems.map((item, index) => (
        <label key={index}>
          <span className="is-flex">
            <img
              className="width-40"
              src={changeIcon(item)}
              alt={item.id}
            />
            <input
              className="is-hidden"
              type="checkbox"
              id={item.id}
              onChange={confirmCheck}
              checked={selected[item.id]}
            />
            <span className="is-flex is-align-items-center">{item.title}</span>
          </span>
        </label>
      ))}
    </div>
  );
}

参考にさせていただいたサイト

React hooks で複数のcheckboxを実装してみる