Why is SVG-import importing the wrong image in React?

I am trying to import an SVG-File as a React Component. This works fine in other files I am working on. But in the one I have a problem with, instead of the correct image, another image is displayed.

import React from 'react';
import './news-detail.style.css';
import Header from '../header/header.component';
import {useNavigate} from "react-router-dom";
import CustomButton from '../custom-button/custom-button.component';
import { ReactComponent as Img } from './newsdetail.svg';


const NewsDetail = props => {
    const navigate = useNavigate();
    return <div className='news-detail'>
        <Header/>
        <h1 className="pageheadline">News</h1>
        <CustomButton onClick={() => navigate(-1)}>Back</CustomButton>  
        <Img className="headerimg"/>
        </div>;
};


export default NewsDetail;

This is my code. The newsdetail.svg is not displayed. Instead, a component from my Header is displayed as the image.

Thanks in advance.