Convert JSX String to Orignal JSX

Question

I am getting this issue while converting jsx string to jsx. While rendering it and converting it to jsx still not working . I am giving string

const newhead = '<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><button onClick={() => handleColumnSort("price")} className="flex items-center space-x-1"> PRICE {sortColumn === "price" && (<span className={{sortDirection === "asc" ? "text-gray-600" : "text-maincolor dark:text-maincolor"}}> <FaSort></FaSort> </span> )} </button> </th>';

const newhead = '<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><button onClick={() => handleColumnSort("price")} className="flex items-center space-x-1"> PRICE {sortColumn === "price" && (<span className={{sortDirection === "asc" ? "text-gray-600" : "text-maincolor dark:text-maincolor"}}> <FaSort></FaSort> </span> )} </button> </th>';

I am using this <tr dangerouslySetInnerHTML={{ __html: ${newhead} }} />; but getting this " handleColumnSort("price")} className="flex items-center space-x-1"> PRICE {sortColumn === "price" && (" in front