I have been trying to display ascii tick symbol for my button text but can't seem to get it to work properly it just shows the string &#10004 within the button anyone know how to fix this is it something to do with my button props?

Here are my two components:

Item:

  import logo from './logo.svg';
    import './App.css';
    import { Button } from './Button';
    
    import React, { useState } from 'react';
    
    const Item = () => {
        const [item, setItem] = useState("");
        
      return (
          
        <div className="Item">
        
          <input 
              type="text"
              value={item}
              label="Enter item scheduled"
              onChange={(evt) => {
                  setItem(evt.target.value);
              }}
          />
          <Button className="CompleteButton" text="&#10004"/>
          
        <h3>Your item scheduled is: {item}</h3>
        
      </div>
        
      );
    }
    
    export {Item};

Button:

import React from 'react';

const Button = (props) => {
    return (
        <button className={props.className} onClick={props.onClick}>{props.text}</button>
    )
}


export {Button}