How can I create a triangle with a white interior, black border lines, and text inside it in REACT?

Question

I have searched online and asked to chatGPT, but those answering can only draw a triangle like these ▲, ▼, ◀, ▶, ◢, ◣, ◥, ◤. What I want to create is a triangle with empty inside, black border lines like this one, △. Any of ▽, ◿, ◺, ◹, ◸, ▲, ▼, ◀, ▶, ◢, ◣, ◥, ◤ are not what I want. Also, the triangle must be inline-block, and can hold text in it. The width of it must be same to the the length of the text's font-size.

Is is possible to paint?

You can work from here.

import 'css'
const Conjunction = (newSpan, selectedString) => {
  console.log("Conjunction : ",counter)
  newSpan.classList.add('conjunction');
  newSpan.innerText = selectedString;
  return newSpan;
}

export default Conjunction;