I want to delete a list, and style that button with an icon. If i just have "delete" as my button, my onClick returns the ID as expected. However, when I try to use a component for my button, it returns a weird object.

I tried using different elements instead of a <Button/> and different icon libraries, but it results in the same behavior. This is how I was importing the component and I am using styled-components if that matters

import React from "react";
import { Draggable } from "react-beautiful-dnd";
import {BsXCircle} from "react-icons/bs"
import styled from 'styled-components'

Below is my code for my component that renders the list's title, and a button that would delete the list:

<div
   {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}> 
    <div value={props.list._id} onClick = {props.handleListSelect} className="list"> 
        <button  value={props.list._id} onClick={props.handleDeleteList} >                          
            <BsXCircle/>           
        </button>
        {props.list.title}                        
    </div>
</div>

The code snipper below works as expected.

<button  value={props.list._id} onClick={props.handleDeleteList} >                          
    delete         
</button>

My props.handleDeleteList function is below:

const deleteList = async (e) =>{
   console.log(e.target.value)
}

If I use <BsXCircle/> , my console log is this:

{stringValue: '"undefined"', valueType: 'string', kind: 'ObjectId', value: 'undefined', path: '_id', …}

I am confused of why this is happening....

Isnt my value that I am passing assigned in the value attribute of my button? Why does rendering a component instead of a text change the value of my button?

I have simplified my code just for asking this question. I would appreciate any feedback, even on ways to improve on asking questions. Thank you in advance :)