error: Cannot read properties of undefined (reading 'singleScreenShot') reading a css file

Question

The following code doesn't want to work, with the above error code. The minimum code is:

screen-shots.css

.singleScreenShot {
  max-width: 33%;
  text-align: center;
  margin: 0 auto;
}

index.tsx

import React from 'react';
import styles from './screen-shots.css';

function ScreenShot(): JSX.Element {
  return (
  <>
    <div className={styles.singleScreenShot}>
      <img src="https://images.unsplash.com/photo-1518133910546-b6c2fb7d79e3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80"> 
      </img>
    </div>
  </>
)}

export default ScreenShot;

Then I'm using the output in anothe rfile like this:

<ScreenShot>  </ScreenShot>