Проблемы с отображением SVG в приложении React

Я пытался добавить файл SVG в ту же папку с файлом js в моем приложении React, однако он отображает изображение по умолчанию без изображения. Я использую реагирующее приложение 1.6.9.

Я пробовал перетаскивать содержимое файла SVG и безуспешно пытался найти решения в Интернете.

<img src = {"dot.svg"}/>
<img src = {"./dot.svg"}/>
<smg src = "./dot.svg">

<?xml version = "1.0" encoding = "UTF-8" standalone = "no"?><!DOCTYPE svg 
PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width = "100%" 
height = "100%" viewBox = "0 0 800 600" version = "1.1" 
xmlns = "http://www.w3.org/2000/svg" 
xmlns:xlink = "http://www.w3.org/1999/xlink" xml:space = "preserve" 
xmlns:serif = "http://www.serif.com/" style = "fill-rule:evenodd;clip- 
rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke- 
miterlimit:1.5;"><ellipse cx = "400" cy = "300" rx = "26.434" ry = "25.114" 
style = "fill:#00017f;stroke:#000;stroke-width:1px;"/></svg>

Я хотел бы отобразить файл SVG в своем приложении React.