how to set styles of each tag differently in Reactjs

Question

I have two <input> tags and one <textarea> whose inline styles are useState styles variable.

I want to change the background of each tag separately onMouseEnter and onMouseLeave to create a hover effect but all tags styling are being changed. Any other way of doing the same is also welcome.

import React from "react";
import "./contact.css";
import { Container } from "react-bootstrap";
import { useState } from "react";

const Contact = ()=>{

    const [style,setStyles]=useState({
        backgroundColor:""
    })
    return (
        <section id="contact">
        <Container fluid style={{padding:"0",margin:"0"}}>
            <div style={{background:"#252934"}} className="contact">
                <h1 className="header" style={{color:"#fff",marginTop:"-5%"}}>CONTACT</h1>
                <p style={{color:"rgb(4, 194, 201)",fontWeight:"600"}}>Have a question or want 
                 to work together?</p>
            
            <input type="text" 
            placeholder="Name"  
            onMouseEnter={()=>{setStyles({
                backgroundColor:"#fff"
            })}} 
            onMouseLeave={()=>{
                setStyles({
                    backgroundColor:""
                })
            }} style={style}/>

            <input type="email" 
            placeholder="Email" 
            onMouseEnter={()=>{setStyles({
                backgroundColor:"#fff"
            })}} 
            onMouseLeave={()=>{
                setStyles({
                    backgroundColor:""
                })
            }} style={style}/>


            <textarea name="" id="" cols="60" rows="10"placeholder="Your Message"
            onMouseEnter={()=>{setStyles({
                backgroundColor:"#fff"
            })}} 
            onMouseLeave={()=>{
                setStyles({
                    backgroundColor:""
                })
            }} style={style}
            />
            
            <button type="button" className="btn btn-outline-light"
            style={{width:"auto",margin:"20px auto",textTransform:"uppercase"}}
            
            >Submit</button>

       
        </div>
    </Container>
    </section>
)
}

export default Contact

Answer 1

You don't really need to use states for it. A simple css hover property will help you change the background of each tag separately:

.input-change-on-hover:hover {
  backgroundColor: #fff,
}

<input type="text" placeholder="Name" className='input-change-on-hover' />