Why image not displaying on React Typescript and Styled Component

I'm trying to display an image in a react project, which is created with typescript template.

The code runs and the page shows only image icon, but not the image itself. What am I doing wrong?

I used: create-react app --template typescript. I can't access it if I place it in the public directory. So the folder is placed in the src directory.

this is how it looks like the component:

import React from 'react';
import styled from 'styled-components';

const logo = require('../../src/images/logo.png');

const StyledTable = styled.div``;

export const MyPage: React.FC = () => {
  return (
    <StyledTable>
      <img alt="Profile Image" style= src={String(logo)} />
    </StyledTable>
  );
};

export default MyPage;

This is how it looks like:

from Recent Questions - Stack Overflow https://ift.tt/3x2mLrx
https://ift.tt/3zZl5kx