无法弄清楚如何在反应应用程序中单击和拖动以更改颜色

如何解决无法弄清楚如何在反应应用程序中单击和拖动以更改颜色

这是包含在 div 中的书籍列表的样子

<div>
    <listofBooks/>
</div>

问题：

我正在尝试在这个 React 应用程序中创建一个功能，允许您拖动和选择多本书。将它们从这种绿色更改为红色。基本上就像从起点到终点画一条线，线结束的地方都应该标记为红色。

我尝试过的事情：

我尝试在位于下方的 bookicofunc 组件内的 useEffect() 内使用 document.onmouseup() document.onMouseDown() 和 document.onMouSEOver()

尝试使用与提供程序匹配的上下文钩子。它会在控制台中记录正确的内容，但仅在选择时拖动时不会更改颜色。

代码：

BookIcoFunc.jsx

import React,{useState,useRef,useEffect,useContext} from 'react'
import { FaBook } from 'react-icons/fa'
import BookIcoContext from '../../context/BookIconContext';






export default function BookIconFunc(props) {


    const [selected,setSelected] = useState(props.checkedOut)
    var color = selected ? 'red' : 'green'
  



    const gotClicked = useContext(BookIcoContext)

    /* 
    
        if selected = false that means it is available
        when clicked it should turn red
    
    */

    const indBook = {
        margin: "0.5rem",color: color
    }


    useEffect(() => {
        if(gotClicked === true){
            setSelected(!selected)
            // color = selected ? 'red' : 'green'
        }
    },[selected])

    




    return <div>
        <FaBook 
        className={props.className} 
        style={indBook} size={32} 
        onMouSEOver={() => {
            console.log(gotClicked);
            // if(gotClicked === true){
            //     setSelected(!selected)
            //     color = !selected ? 'red' : 'green'
            // }
        }}
        onMouseDown={() => {
            setSelected(!selected) 
        }}
        onmouseup={() => {
            
        }}
        
        
      

    >
        

    </FaBook>
    </div>
    





}

BooksUpdate.jsx

import BookIconFunc from '../components/helperComponents/bookIconFunc'
import BookIcoContext from '../context/BookIconContext';

export default function BooksUpdate(props) {
 /* BOOK ICON CONTEXT STATE */

 const [iconState,setIconState] = useState(false)

return <BookIcoContext.Provider value={{iconState,setIconState}}>
                    <div style={booksRows} onClick={() => setIconState(true)} onmouseup={() => setIconState(false)}>
                        {
                            
                            copies ? copies.map((copy,index) => {
                                return <div 
                                key={index}  


                                
                                >
                        
                        
                                    <BookIconFunc 
                                        className={classNameChanged} 
                                        checkedOut={copy.checkedOut}
                                        ref={bookicoref[index]} 
                                    >



                                    </BookIconFunc>
                            
                            
                                    
                                </div>
                            }) 
                        
                        : 
                        
                        
                            <div>none</div>
                        }
                    </div>
                </BookIcoContext.Provider>

bookicocontext.js

import { createContext } from 'react';


export default createContext(null);

让我知道我是否应该进一步解释或提供更多代码！