Reactでいいねボタンを表示させたい

Reactでいいね機能を実装しているがいいねボタンが表示されない原因を解決したい

現在、RailsアプリケーションでReactを用いていいね機能の実装をしているのですが、react-bootstrap-iconsを導入していいねボタンを表示させようとしたが、ブラウザ上にボタンが表示されない。

ボタンが表示されない原因やヒントなどをご教授願えますでしょうか。

該当のソースコード

app/javascript/bundles/Favorite.jsx

jsx
1import PropTypes from 'prop-types';
2import React, { useState } from 'react';
3import { HeartFill } from 'react-bootstrap-icons';
4import axios from 'axios'
5
6axios.defaults.headers['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
7
8const Favorite = (props) => {
9    const { uploadId, favoriteId } = props;
10    const [id, setId] = useState(favoriteId);
11    // const [count, setCount] = useState(0)
12
13    const clicked = async () => {
14        if (id == null) {
15            const { data: { id = null } } = await axios.post('/favorites', { upload_id: uploadId })
16            id && setId(id);
17        } else {
18            await axios.delete(`/favorites/${id}`)
19            setId(null);
20        }
21    }
22
23    return (
24        <>
25            <HeartFill
26                color={id ? 'red' : '#616161'}
27                size={25}
28                onClick={clicked}
29            />
30        </>
31    );
32};
33
34Favorite.propTypes = {};
35
36export default props => <Favorite {...props} />;

また、import PropTypes from 'prop-types';が未使用と表示されてしまう。

app/javascript/packs/bundle.js

import ReactOnRails from 'react-on-rails';

import Favorite from '../bundles/Favorite';

// This is how react_on_rails can see the HelloWorld in the browser.
ReactOnRails.register({
    Favorite,
});

app/views/uploads/index.html.erb

erb
1<% @uploads.each do |upload| %>
2          <div class="content-page">
3            <%= link_to upload_path(upload.id), class: "upload-link", method: :get do %>
4              <div class="upload-contents-wrapper">
5                <div class="upload-img-contents">
6                  <%= image_tag upload.image, class: "upload-img" if upload.image.attached? %>
7                </div>
8                <div class="upload-contents-detail">
9                  <div class="upload-name"><%= upload.title %></div>
10                  <div class="tag-container">
11                    <% upload.tags.each do |tag| %>
12                      <div class="upload-tags">
13                        #<%= tag.name %>
14                      </div>
15                    <% end %>
16                  </div>
17                </div>
18                <div class="upload-contents-explain">
19                  <div class="upload-explain"><%= upload.text %></div>
20                </div>
21            <% end %>
22            <div class="footer-content">
23              <div class="upload-user">
24                <%= link_to image_tag(upload.user.avatar, class: "avatar-img"), user_path(upload.user.id) %>
25                <%= link_to upload.user.name, user_path(upload.user.id), class: "upload-user__name" %>
26              </div>
27              <div class="favorite">
28                <p><%= react_component("Favorite", props: { uploadId: upload.id, favoriteId: upload.favorite_by(current_user)&.id }, prerender: false) %></p>
29              </div>
30            </div>
31            </div>
32          </div>
33        <% end %>

app/controllers/favorites_controller.rb

ruby
1class FavoritesController < ApplicationController
2  def create
3    favorite = current_user.favorites.create!(favorite_params)
4    render json: favorite
5  end
6
7  def destroy
8    favorite = Favorite.find(params[:id])
9    favorite.destroy
10    render json: favorite
11  end
12
13  private
14
15  def favorite_params
16    params.require(:favorite).permit(:upload_id)
17  end
18end
19