map Function Not Found When Reading from JSON File - reactjs

Question

I created a React app with this command: npx create-react-app test-project
I have a small JSON file:
{
"colors": [
{
"id": 0,
"name": "red"
},
{
"id": 1,
"name": "green"
},
{
"id": 2,
"name": "blue"
},
{
"id": 3,
"name": "yellow"
}
]
}
And I am trying to display it in a list in React.
import {colors} from "./colors.json";
function App() {
return (
<div>
<ul>
{colors.map((c, i) =>
<li>{c.name}</li>
)}
</ul>
</div>
);
}
export default App;
When I run it, I get the following error:
Compiled with problems:X
ERROR in ./src/App.js 11:16-26
export 'colors'.'map' (imported as 'colors') was not found in './colors.json' (possible exports: 0, 1, 2, 3)
Because this project is pulled from a larger project, I happen to know what the issue is. In the package.json file, my react-scripts version is 5.0.0. If I downgrade it to 4.0.1, the issue resolves.
However, as someone who is learning React, I would like to understand why this error occurs. I don't understand why it is no longer able to recognize that an array from a JSON file would have a map function defined. I would definitely prefer the behavior found when I set react-scripts to 4.0.1.
Is this a bug or a feature? I have examined the release notes for react-scripts 5.0.0, but don't see anything relevant.