Two errors when trying to render icons dynamically with React – Reactjs

I’m slightly baffled on why I’m unable to generate icons dynamically with the way I’ve setup my React component.

I’ve tried using both specific imports for each icon and importing them all at once, however, I keep receiving the same error:

RiSave3Fill /> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

and

RiSave3Fill /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

Here is my Buttons component where I’m trying to dynamically generate the icons for each button.

import React from 'react'
import { useState } from 'react';
import './buttons.scss';
// import * as icons from 'react-icons';
import {MdOutlineClose} from 'react-icons/md';
import { BsCameraVideo } from 'react-icons/bs'
import { TbRotate360, TbRotate2, TbRotateClockwise2 } from 'react-icons/tb';
import { RiSave3Fill } from 'react-icons/ri';

function Buttons(props) {
    return(
        <div className="menu__buttons-wrapper">
            {props.buttons.map((button, index) => {
                const BtnIcon = button.icon;
                
                return (
                    <button key={index}>
                        {<BtnIcon />}
                    </button>
                )
            })}
        </div>
    )
}

export default Buttons

This is the data structure of (props) in the button component

{
        type: "buttons",
        buttons: [
            {
                type: "camera",
                icon: "BsCameraVideo"
            },
            {
                type: "rotateCounterClockwise",
                icon: "TbRotate2"
            },
            {
                type: "rotate360",
                icon: "TbRotate360"
            },
            {
                type: "rotateClockwise",
                icon: "TbRotateClockwise2"
            },
            {
                type: "save",
                icon: "RiSave3Fill"
            },
            {
                type: "close",
                icon: "MdOutlineClose"
            },
        ]
    }