Why does react think my custom component is named incorrectly?

Question

I'm trying to set up a particles.js test app on my local environment using react. I've written a custom ParticlesBackground.js component to be included in a very simple App.js example. As far as I can tell, I'm adhering to the PascalCase requirement for custom components, and I'm still met with the following error: "</static/media/ParticlesBackground.7be166dfe67bb758e0a3 /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements." Below is ParticlesBackground.js.

import React, { Component } from 'react';
import Particles from 'react-particles-js';

class ParticlesBackground extends Component {
  render() {
    const ParticleParams = {
      particles: {
        number: {
          value: 100,
        },
        size: {
          value: 3,
        },
      },
    };

    return (
      <Particles
        params={ParticleParams}
        style={{ position: 'absolute', width: '100%', height: '100%' }}
      />
    );
  }
}

export default ParticlesBackground;

And here's App.js:

import React from 'react';
import ParticlesBackground from './ParticlesBackground';

function App() {
  return (
    <div className="App">
      <ParticlesBackground/>
      {/* Other components */}
    </div>
  );
}

export default App;

I've tried changing the case of ParticlesBackground as it's referred to in ParticlesBackground.js (including name) and App.js, but received the same error message. Thanks for everyone's time and help.